# 입력 폼 만들기 ## 미션 아래 이미지를 참고하여, 나만의 입력 페이지를 만드시오. ![클라우드스터딩-HTML-입력폼-form-input-태그](https://i.imgur.com/YxlinBi.png) ## 개념 #### ⭐️ input 태그 사용자의 입력은 input 태그를 사용한다. 이때, type에 따라 다양한 입력이 가능하다. ``` <label>이름: </label> <input type="text" /> <label>생년월일: </label> <input type="date" /> <input type="checkbox" /> <label>이메일 수신 동의</label> <input type="radio" name="team" /> <label>프론트 엔드</label> <input type="radio" name="team" /> <label>백 엔드</label> ``` #### ⭐️ select 태그 여러 선택지 중 하나를 고를 땐, select와 option 태그를 활용한다. ``` <select> <option>남성</option> <option>여성</option> </select> ``` #### ⭐️ textarea 태그 장문의 글을 입력할 땐, textarea를 사용한다. ``` <textarea></textarea> ``` #### ⭐️ div 태그 여러 요소를 하나로 묶을 때, div를 쓴다. div로 묶인 요소들은 블럭화 되어, 하나의 행을 모두 차지하게 된다. ``` <div> <lable>이메일: </lable> <input type="email" /> </div> ``` ## 구글링 힌트 - "html 텍스트 입력" - "html textarea" - "html 날짜 입력" - "html 체크박스" - "html 라디오 버튼"
관련 강의로 이동

코드: java 1.8

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>입력 폼 만들기!</title> </head> <body> <h1>입사 지원서</h1> <h2>필수 정보</h2> <!-- div, 블럭화(영역묶음) 태그--> <div> <!-- 문자 입력 --> <label>이름: </label> <input type="text" /> </div> <div> <!-- 날짜 입력 --> <label>생년월일: </label> <input type="date" /> </div> <div> <!-- 선택 입력 --> <label>성별: </label> <select> <option>남</option> <option>여</option> </select> </div> <!-- 긴 문장 입력 --> <h2>개발자는 왜?</h2> <textarea></textarea> <!-- 체크박스 --> <h2>사용해본 것들</h2> <div><input type="checkbox" /><label>Java</label></div> <div><input type="checkbox" /><label>Python</label></div> <div><input type="checkbox" /><label>HTML/CSS</label></div> <div><input type="checkbox" /><label>JS</label></div> <div><input type="checkbox" /><label>Bootstrap</label></div> <div><input type="checkbox" /><label>SQL</label></div> <!-- 라디오 버튼 --> <h2>희망 부서</h2> <div><input type="radio" name="team" /><label>프론트엔드</label></div> <div><input type="radio" name="team" /><label>백엔드</label></div> <div><input type="radio" name="team" /><label>DB</label></div> </body> </html>

입력

정답이 궁금하다면? 코드를 제출해보세요!