이번 글에서는 다양한 HTML form 요소에 대해 설명한다.
HTML <form> 요소
HTML <form> 요소는 다음 양식 요소 중 하나 이상을 포함할 수 있다:
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- <output>
- <option>
- <optgroup>
HTML <input> 요소
가장 많이 사용되는 폼 요소 중 하나는 <input> 요소이다.
<input> 요소는 유형 속성에 따라 여러 가지 방식으로 표시될 수 있다.
| <!DOCTYPE html> <html> <body> <h2>input 요소</h2> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML <label> 요소
<label> 요소는 여러 폼 요소에 대한 레이블을 정의한다.
사용자가 입력 요소에 초점을 맞출 때 화면 판독기가 라벨을 크게 읽기 때문에 <라벨> 요소는 화면 판독기 사용자에게 유용하다.
또한 <label> 요소는 사용자가 <label> 요소 내의 텍스트를 클릭하면 라디오 단추/확인란을 전환하기 때문에 매우 작은 영역(예: 라디오 단추 또는 확인란)을 클릭하는 데 어려움을 겪는 사용자에게 도움이는 사용자가 <label> 요소 내의 텍스트를 클릭할 때 라디오 단추/확인란을 전환하기 때문이다.
<label> 태그의 for 속성은 이들을 함께 바인딩하려면 <input> 요소의 id 특성과 같아야 한다.
HTML <select> 요소
<select> 요소는 드롭다운 목록을 정의한다:
| <!DOCTYPE html> <html> <body> <h2>select 요소</h2> <p>선택 요소는 드롭다운 목록을 정의합니다:</p> <form action="/action_page.php"> <label for="cars">자동차를 선택하시오:</label> <select id="cars" name="cars"> <option value="volvo">볼보</option> <option value="saab">사브</option> <option value="fiat">피아트</option> <option value="audi">아우디</option> </select> <input type="submit"> </form> </body> </html> |
<option> 요소는 선택할 수 있는 옵션을 정의합니다.
기본적으로 드롭다운 목록의 첫 번째 항목이 선택됩니다.
미리 선택한 옵션을 정의하려면 선택한 특성을 옵션에 추가합니다:
| <!DOCTYPE html> <html> <body> <h2>Pre-selected Option</h2> <p>선택한 특성을 가진 옵션을 미리 선택할 수 있습니다:</p> <form action="/action_page.php"> <label for="cars">자동차를 선택하시오:</label> <select id="cars" name="cars"> <option value="volvo">소나타</option> <option value="saab">그랜저</option> <option value="fiat" selected>SM6</option> <option value="audi">에쿠스</option> </select> <input type="submit"> </form> </body> </html> |
Visible value
size 속성을 사용하여 표시되는 값의 수를 지정한다:
| <!DOCTYPE html> <html> <body> <h2>Visible Option Values</h2> <p>size 속성을 사용하여 표시되는 값의 수를 지정합니다.</p> <form action="/action_page.php"> <label for="cars">자동차를 선택하시오:</label> <select id="cars" name="cars" size="3"> <option value="volvo">소나타</option> <option value="saab">그랜저</option> <option value="fiat" selected>SM6</option> <option value="audi">에쿠스</option> </select> <input type="submit"> </form> </body> </html> |
다중선택
multiple 속성을 사용하여 사용자가 둘 이상의 값을 선택할 수 있습니다:
| <!DOCTYPE html> <html> <body> <h2>다중선택</h2> <p>다중 속성을 사용하여 사용자가 두 개 이상의 값을 선택할 수 있습니다.</p> <form action="/action_page.php"> <label for="cars">자동차를 선택하시오:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">소나타</option> <option value="saab">엑센트</option> <option value="fiat">그랜저</option> <option value="audi">에쿠스</option> </select><br><br> <input type="submit"> </form> <p>Ctrl(창) / Command(Mac) 버튼을 누른 상태에서 여러 옵션을 선택합니다.</p> </body> </html> |
HTML <textarea> 요소
<textarea> 요소는 다중 줄 입력 필드(텍스트 영역)를 정의한다:
| <!DOCTYPE html> <html> <body> <h2>Textarea</h2> <p>텍스트 영역 요소는 다중 줄 입력 필드를 정의합니다.</p> <form action="/action_page.php"> <textarea name="message" rows="10" cols="30">고양이는 정원에서 놀고 있었습니다.</textarea> <br><br> <input type="submit"> </form> </body> </html> |
row 속성은 텍스트 영역에 표시되는 줄 수를 지정한다.
cols 특성은 텍스트 영역의 가시적인 너비를 지정한다.
CSS를 사용하여 텍스트 영역의 크기를 정의할 수도 있다:
| <!DOCTYPE html> <html> <body> <h2>Textarea 스타일</h2> <p>CSS를 사용하여 텍스트 영역의 크기 변경:</p> <form action="/action_page.php"> <textarea name="message" style="width:200px; height:600px;">고양이는 정원에서 놀고 있었습니다.</textarea> <br> <input type="submit"> </form> </body> </html> |
HTML <button> 요소
<button> 요소는 클릭 가능한 버튼을 정의한다:
| <!DOCTYPE html> <html> <body> <h2>button 요소</h2> <button type="button" onclick="alert('Hello World!')">클릭!</button> </body> </html> |
<fieldset>과 <legend> 요소
<fieldset> 요소는 양식의 관련 데이터를 그룹화하는 데 사용된다.
<legend> 요소는 <fieldset> 요소에 대한 캡션을 정의한다.
| <!DOCTYPE html> <html> <body> <h2>필드 집합을 사용하여 양식 데이터 그룹화</h2> <p>필드 세트 요소는 양식의 관련 데이터를 그룹화하는 데 사용되며 범례 요소는 필드 세트 요소에 대한 캡션을 정의합니다.</p> <form action="/action_page.php"> <fieldset> <legend>개인기록:</legend> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동"><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="제출"> </fieldset> </form> </body> </html> |
<datalist> 요소
<datalist> 요소는 <input> 요소에 대해 미리 정의된 옵션 목록을 지정한다.
사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록을 볼 수 있다.
<input> 요소의 list 속성은 <datalist> 요소의 id 속성을 참조해야 한다.
| <!DOCTYPE html> <html> <body> <h2> datalist 요소</h2> <p>데이터 목록 요소는 입력 요소에 대해 미리 정의된 옵션 목록을 지정합니다.</p> <form action="/action_page.php"> <input list="browsers" name="브라우저"> <datalist id="browsers"> <option value="인터넷 익스플로어"> <option value="파이어폭스"> <option value="크롬"> <option value="오페라"> <option value="사파리"> </datalist> <input type="submit"> </form> <p><b>Note:</b> 데이터 목록 태그는 Safari 이전 버전 12.1에서 지원되지 않습니다.</p> </body> </html> |
<output> 요소
<output> 요소는 스크립트에 의해 수행된 것과 같은 계산 결과를 나타냅니다.
| <!DOCTYPE html> <html> <body> <h2> output 요소</h2> <p>output 요소는 계산 결과를 나타냅니다.</p> <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> <p><strong>Note:</strong> 출력 요소는 Edge 이전 버전 13에서 지원되지 않습니다.</p> </body> </html> |
마무리
HTML form 요소 요약은 아래 표와 같다.
| 태그 | 설명 |
| <form> | 사용자 입력에 대한 HTML 양식을 정의 |
| <input> | 입력 컨트롤을 정의합니다 |
| <textarea> | 다중 라인 입력 컨트롤(텍스트 영역)을 정의합니다 |
| <label> | <input> 요소에 대한 레이블을 정의합니다 |
| <fieldset> | 양식의 관련 요소 그룹화 |
| <legend> | <fieldset> 요소에 대한 캡션을 정의합니다 |
| <select> | 드롭다운 목록을 정의합니다 |
| <optgroup> | 드롭다운 목록에서 관련 옵션 그룹을 정의합니다 |
| <option> | 드롭다운 목록에서 옵션을 정의합니다 |
| <button> | 클릭 가능한 버튼을 정의합니다. |
| <datalist> | 입력 제어에 대한 사전 정의된 옵션 목록을 지정합니다. |
| <output> | 계산 결과를 정의합니다 |
꼭 실습하시고 또 실습하는 길이 코딩 실력을 향상시킵니다.
모두 화이팅입니다!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML input유형-2 (0) | 2023.06.09 |
|---|---|
| HTML input 유형-1 (0) | 2023.06.08 |
| HTML #Form 속성 (0) | 2023.06.06 |
| HTML Forms (0) | 2023.06.05 |
| HTML vs XHTML (0) | 2023.06.04 |
댓글