HTML 태그 4편 (form tag - 양식태그)

8. Form tag(양식태그)

웹문서에서 사용자에게 데이터를 받는 요소들을 (인터랙티브 요소들) 양식요소라고 한다.

양식태그는 html사용시 구조만 표현하며 동작은 스크립트로 구현해야 한다.

(1) 기본구조

form : 폼의 시작과 끝 => 브라우저 상에 표시되는 건 없음

fieldset : 개별 폼요소에 대한 그룹핑 => 브라우저에 사각 테두리로 표현됨

legend : 필드셋에 대한 그룹이름 => 필드셋 테두리 좌측 상단에 표시

label : 폼요소의 이름부여

<h2>기본형</h2>
<form>
    <fieldset>
        <legend>검색</legend><!-- 필수입력요소 제목-->
        <input type="text" /><!-- 검색 -->
    </fieldset><!-- 태그 그룹화 -->
</form><!-- 양식태그 끝 -->

(2) 양식태그 종류 : input, label, select, textarea, button 등

1) input

사용자에게 데이터를 입력받는 박스를 생성

■ input 기본속성

<input type="" value="" id="" name="" size="" maxlength="" />

=> 종료태그가 존재하지 않음

■ type 속성 => input 스타일(데이터 입력패턴) 바꾸기

- text => 글자를 입력받을 때 사용

- password => 비밀번호를 입력시 사용

- checkbox => 다중선택박스 ex)취미, 약관

- radio => 무조건 하나만 선택해야할 때 ex)성별

- button => 사용자 버튼을 생성할 때 ex)아이디를 적을 때 중복확인 할 경우

- reset => form 태그 안에 입력된 모든 값을 초기화시킴 ex)회원가입 다시입력

- submit => form 태그 안에 입력된 값을 서버로 전송하는 버튼 

■ value => input 요소의 값

- reset, submit, button의 버튼 이름 값은 value로 수정가능

■ size => 폼요소의 길이(영문자 개수가 기준)

■ maxlength => 최대문자 입력 허용 갯수

■ name => 폼요소의 이름(서버 전송용)

■ id => 폼요소의 이름(JS, CSS 호출용)

<h2>input 기본형</h2>
<form>
    <fieldset>
        <legend>필수요소 인풋기본형</legend>
        <input type="text" />
    </fieldset>
    <fieldset>
        <legend>type 속성</legend>
        <input type="text" />
        <input type="password" />
        <input type="checkbox" /> <!-- 다중 선택 가능 -->
        <input type="radio" /> <!-- 단일 선택만 가능 -->
        <input type="reset" />
        <input type="button" />
        <input type="submit" />
        <input type="date" />
        <input type="color" />
    </fieldset>
    <fieldset>
        <legend>속성</legend>
        <input type="text" value="아이디" />
        <input type="password" value="비밀번호"/>
        <input type="checkbox" />야구
        <input type="checkbox" />농구
        <input type="checkbox" />축구
        <input type="radio" />남자
        <input type="radio" />여자
        <input type="reset" value="취소" />
        <input type="button" value="확인" />
        <input type="submit" value="저장" />
    </fieldset>
    <fieldset>
        <legend>기타 속성</legend>
        <input type="text" value="아이디" size="10" maxlength="10" />
        <input type="text" name="username" id="username" />
    </fieldset>
</form>

2) label : 폼요소 라벨표현하기

 - 폼요소에 이름을 생성해야 하며 이때 label 요소를 사용한다(button 요소는 이름표 생략)

 - label 요소의 위치에 따라 명시적 라벨, 암묵적 라벨 2가지를 사용한다.

(참고) 암묵적 라벨과 명시적 라벨

 - 암묵적 라벨은 폼요소를 label 안에 작성

 - 명시적 라벨은 폼요소와 label 요소를 개별 작성(순서는 상관없음)

<h3>암묵적 라벨</h3>
<form>
    <fieldset>
        <legend>암묵적 라벨</legend>
        <label>아이디 검색 <input type="text" /></label>
    </fieldset>
    <fieldset>
        <legend>명시적 라벨</legend>
        <label for="id_search">아이디 검색</label>
        <input type="text" id="id_search" />
    </fieldset>
</form>

3) select

- 선택 상자를 생성

■ 기본구조

<select>
    <option></option> <!-- li와 동일 -->
</select>

<h2>select 예시</h2>
<form>
    <fieldset>
        <legend>select 태그</legend>
        <select>
            <option>동구</option>
            <option>서구</option>
            <option>남구</option>
            <option>남구</option>
        </select>
    </fieldset>
</form>

4) textarea

 - 글상자를 생성(여러줄 입력 가능)

<h2>textarea 예시 </h2>
<form>
    <fieldset>
        <legend>글상자</legend>
        <textarea></textarea><!-- 사이에 여백을 주면 안됨 -->
    </fieldset>
</form>

5) button

<h2>button 예시</h2>
<form>
    <fieldset>
        <legend>button</legend>
        <button>버튼</button>
    </fieldset>
</form>

2018/07/07 - [IT/HTML] - HTML 태그 3편(table)