html <input>태그 사용 입력칸, 체크박스, 선택버튼, 드롭다운메뉴 만드는 방법

html에서 입력, 체크박스, 선택버튼, 드롭다운 메뉴를 만드는 방법을 알아보겠습니다. 

 

1. 입력란 만드는 방법

<input>태그를 사용하여 속성을 "text"로 합니다. 

 

<label for="name">Name:</label>
<input type="text" id="name" name="name">

 

결과물입니다. 

 

Name:

 

2. 체크박스 만드는 방법

<input>태그를 사용하여 속성을 "checkbox"로 합니다. 

<label for="checkbox">Check me:</label>
<input type="checkbox" id="checkbox" name="checkbox">

 

결과물입니다. 

 

Check me:

 

3. 옵션선택버튼 또는 항목 선택 버튼 

<input>태그를 사용하여 속성을 "radio"로 합니다. 

<label for="dropdown">Select an option:</label>
<select id="dropdown" name="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

 

결과물은 다음과 같습니다. 

 

Option 1:Option 2:

 

4. 드롭다운 메뉴 만드는 방법

<input>태그를 사용하여 속성을 "dropdown"로 합니다. 

 

<label for="dropdown">Select an option:</label>
<select id="dropdown" name="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

 

결과물은 다음과 같습니다. 

 

Select an option:

Option 1 Option 2 Option 3