[HTML] 입력 폼 만들기 (input, label, select)

HTML에서 사용자에게 정보를 입력 받기 위해 사용하는 다양한 입력 양식 태그들에 대해 알아보겠습니다.

 

<input> 태그

<input> 태그는 사용자에게 정보를 입력 받는 기능을 수행하는 태그입니다. type 속성을 사용하여 다양한 유형의 입력 양식을 만들 수 있습니다.

 

input 태그의 type 속성값

• button : 버튼 생성
• password : 비밀번호 입력 양식 생성
• reset : 초기화 버튼 생성
• text : 글자 입력 양식 생성
• number : 숫자 입력 양식 생성
• date : 날짜 입력 양식 생성
• time : 시간 입력 양식 생성

  <div>이름: <input type="text" name="name" value="홍길동" /></div>
  <div>주소: <input type="text" name="adrr" /></div>
  <div>이메일: <input type="email" name="email" /></div>
  <div>색상: <input type="color" name="clr" /></div>
  <div>나이: <input type="number" name="age" /></div>
  <div>생년월일: <input type="date" name="birth" /></div>
  <div>시간: <input type="time" name="time" /></div>

 

이렇게 코드를 구성할 수 있습니다.

 

<label> 태그

<label> 태그는 폼 양식에 이름을 붙이는 태그입니다. 사용자가 입력 필드와 쉽게 상호작용할 수 있도록 도와줍니다.

• radio : 라디오 버튼 생성 (다중 선택 불가능)
• checkbox : 체크박스 생성 (다중 선택 가능)

 <div>
	취미:
	<label> 축구<input type="checkbox" name="hobby" value="1" /></label>
	<label> 농구<input type="checkbox" name="hobby" value="2" /></label> 
	<label> 야구<input type="checkbox" name="hobby" value="3" /></label> 
</div>
<div>
    성별:
    <label> 여자<input type="radio" name="gender" value="female" /></label>
    <label> 남자<input type="radio" name="gender" value="male" /></label> 
    <label> 중성<input type="radio" name="gender" value="None" /></label> 
</div>

 

다음과 같이 코드를 작성할 수 있습니다.

 

<select> 태그

<select> 태그는 여러 개의 목록에서 하나 또는 여러 개의 항목을 선택할 수 있는 입력 양식 요소입니다.

<select name="location">
      <option value="1">서울</option>
      <option value="2">대전</option>
      <option value="3" selected>대구</option>
      <option value="4">부산</option>
</select>

 

이렇게 select 태그를 입력하고 내부에 option 태그를 넣어 선택지를 구성합니다.

 

위에서 설명한 입력 양식 태그들을 조합하여 최종 폼을 구성하면 이렇게 나옵니다.