HTML 문법 - 7 (입력 양식 태그)

 

입력 양식 태그

 

입력 양식 태그는 회원가입할 때 이름, 나이, 성별 같은 것을 입력할 때 사용하는 태그들이다.

 

<form>

이 태그는 무언가 정보들을 받아올 때 사용하는 태그이다.

 

다음과 같은 속성들을 가지고 있다.

 

name	폼의 이름
action	입력 데이터를 처리하는 웹 프로그램 (jsp,php 와 같은)
method	전송 양식 (GET, POST)
type	입력 양식 모양

 

<form> 에서 사용가능한 태그들

 

<input>	입력
<textarea>	여러줄에 대한 입력
<label>	입력 요소에 대한 라벨링
<fieldset>	form에 관련된 요소
<legend>	<fieldset> 요소에 대한 설명
<select>	선택 목록 생성
<optgroup>	선택 목록에서 관련 옵션 그룹
<option>	선택 목록의 옵션
<button>	버튼
<datalist>	입력에 대한 미리 정의해놓은 옵션들
<output>	계산 결과

 

<input>

 

아래와 같이 입력이 가능한 박스를 하나 생성한다.

닫는 태그가 존재하지 않는다.

value속성을 이용하여 초기값을 설정해 줄 수 있다.

 

<textarea>

 

입력이 가능한 박스 하나를 생성한다.

닫는 태그가 존재하고 그 사이에 작성한 문구가 초기 입력창에 등장한다.

아래와 같이 작성 시

 

<textarea>이름을 입력하십시오</textarea>

 

이와 같은 박스가 생성된다.

 

 

<select> <option> <optgroup>

 

select는 선택할 수 있는 목록을 만들고 option으로 선택할 수 있는 요소들을 만들 수 있다.

 

아래와 같이 작성함으로써 밑의 선택창을 만들 수 있다.

            <select>
                <option>1번</option>
                <option>2번</option>
                <option>3번</option>
            </select>

 

1번 2번 3번

 

<optgroup>은 옵션을 그룹화 해준다.

<optgroup>을 이용하여 아래와 같이 작성 시 밑의 선택창을 만들 수 있다.

 

            <select>
                <optgroup label="1층">
                    <option>101호</option>
                    <option>102호</option>
                    <option>103호</option>
                </optgroup>
                <optgroup label="2층">
                    <option>201호</option>
                    <option>202호</option>
                    <option>203호</option>
                </optgroup>
            </select>

 

 

101호 102호 103호 201호 202호 203호

 

 

<label>

<label>을 이용하여 라벨링을 해줄 수 있다.

<input> 이나 <textarea>등에 id 속성을 이용하여 라벨링을 해줄 수 있는데 코드로는 다음과 같다.

 

<label for="name">이름 : </label>
<input type="text" id="name" value="이름을 입력하십시오" size="20">

사이트에서는 다음과 같이 표시된다.

 

<fieldset> <legend>

 

<fieldset>은 필드를 하나 만든다. <legend>는 field에 대한 제목을 만들 수 있다.

 

아래와 같이 코드를 작성해서 fieldset을 이용할 수 있다.

 

			<fieldset>
                <legend>개인정보</legend>
                <label for="이름">이름:</label>
                <input id="이름" value="이름을 입력하세요">
            </fieldset>

 

사이트에서는 다음과 같이 보인다.