[HTML] FORM 양식 태그

FORM 양식 태그

• FORM 양식 태그에는 input 태그를 제외한 다양한 태그가 있다.

태그	속성	설명
textarea		텍스트를 입력할 수 있는 박스 생성
	cols	너비 지정
	rows	높이 지정
select		선택 양식 생성
optgroup		옵션 그룹화
option		옵션 생성
fieldset		입력 양식의 그룹 지정
legend		입력 양식 그룹의 이름 지정

사용 결과

textarea 태그 사용

    <textarea cols="100%" rows="5"></textarea>

 

select 태그 사용

• seleted속성 미리 선택된 값을 지정하는 속성
• option 태그를 활용하여 목록을 표시한다.

<select>
        <option value="a">김밥</option>
        <option value="b" selected>떡볶이</option>
        <option value="c">순대</option>
        <option value="d">어묵</option>
</select>

김밥 떡볶이 순대 어묵

optgroup 태그 사용

• option 태그를 활용하여 목록을 표시한다.
• 목록에 그룹명을 부여해서 화면에 표시

<select>
      <optgroup label="HTMLS">
        <option>html</option>
        <option>css</option>
        <option>javascript</option>
      </optgroup>

      <optgroup label="backend">
        <option>java</option>
        <option>springboot</option>
      </optgroup>
</select>

html css javascript java springboot

fieldset 태그

• form양식을 그룹화 시킴

<fieldset >
        <label>이름</label>  <input type="text"><br/>
        <label>이메일</label> <input type="text">
</fieldset>

이름
이메일

legend 태그

• fieldset 태그 내부에 작성하는 태그
• fieldset 태그 제목 작성

 <fieldset >
        <legend>이름 & 이메일</legend>
        <label>이름</label>  <input type="text"><br/>
        <label>이메일</label> <input type="text">
</fieldset>

이름 & 이메일

이름
이메일