반응형
HTML <form> 요소
<form> 요소들
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <filedset>
- <legend>
- <datalist>
- <output>
- <option>
- <optgroup>
<input> 요소
가장 많이사용되는 양식 요소인 <input> 요소는 type 속성에 따라 여러가지 방법으로 표시될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="ID">ID:</label><br>
<input type="text" id="ID" name="ID"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<label>요소
<label> 요소 여러 양식 요소에 대한 레이블을 정의한다.
<label> 요소는 스크린 리더가 레이블에 맞게 소리내어 읽어주기 때문에 유용하다.
<label> 태그 속 for속성은 <input> 속성의 id 속성과 같아야한다.
<select>, <option> 요소
<select> 요소는 drop-down 리스트를 생성한다.
<option> 요소는 옵션을 선택하는 것이다. 옵선의 기본값은 첫번째 아이템이다.
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="hyundai">hyundai</option>
<option value="kia">kia</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
추가적으로 select 에 size 와 multiple 요소를 추가할 수 있다.
size의 경우 보이는 옵션의 개수를 뜻하며
multiple의 경우 하나이상의 옵션을 선택할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="2" multiple>
<option value="volvo">Volvo</option>
<option value="hyundai">hyundai</option>
<option value="kia">kia</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML 테이블 선 하나로 만들기 border-collapse: collapse (0) | 2023.09.08 |
|---|---|
| HTML Form 속성 (0) | 2023.09.07 |
| HTML 텍스트 포멧팅(TEXT Formattiong) <b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup> 사용법 (0) | 2023.09.05 |
| HTML Forms (0) | 2023.09.05 |
| HTML Iframes (0) | 2023.09.04 |
댓글