[항해99 리액트 입문] 1일차 과제

1일차 과제 : html 태그로 입력폼 만들기

입력란을 작성하세요 뜨게 하는 법

<input type="text" required>

input태그 속성에 required 넣어주기

브라우저 선택 드롭메뉴

 Browser : <select name="인터넷브라우저">
      <option value="크롬">크롬</option>
      <option value="dog">사파리</option>
      <option value="cat">엣지</option>
      </select><br>

select와 option 태그 사용

성별 radio 태그에서 하나만 선택할 수 있도록 하기

Gender : <input type="radio" name="gender">Male<input type="radio" name="gender">Female<br>

하나만 선택되게 하고 싶은 input 태그 속성에 name을 같게 하면 하나만 선택하게 바꿀 수 있다!

체크박스 태그

Favorite : <input type="checkbox">HTML<input type="checkbox">JAVA<input type="checkbox">JavaScript<br>

동그라미는 radio, 네모는 checkbox 속성이다!

필수 체크 검사

function btn() {
      if (document.getElementById("first").value === "" 
      || document.getElementById("last").value === "" 
      || document.getElementById("email").value === "") {
        return false 
      } else { alert('제출 완료!') }
    } 

버튼을 누를 때 값이 없으면 처리되지 않도록 함

전체 코드

<script>
    function btn() {
      if (document.getElementById("first").value === "" 
      || document.getElementById("last").value === "" 
      || document.getElementById("email").value === "") {
        return false 
      } else { alert('제출 완료!') }
    } 
  </script>
  <form> 
    First name : <br>
    <input type="text" id = "first" required><br>
    Last name :  <br>
    <input type="text" id = "last" required><br>
    Email :  <br>
    <input type="text" id = "email" required><br>
    Gender : <input type="radio" name="gender" id="check" required checked>Male<input type="radio" name="gender" id="check" required>Female<br>
    Favorite : <input type="checkbox">HTML<input type="checkbox">JAVA<input type="checkbox">JavaScript<br>
    Browser : <select name="인터넷브라우저">
      <option value="크롬">크롬</option>
      <option value="dog">사파리</option>
      <option value="cat">엣지</option>
      </select><br>
    Birthday : <input type="date"><br>
    <input type="submit" value="제출" onclick="btn()">
  </form>