이번시간에는 form 태그의 사용법에 대해 알아보겠습니다.
form 태그는 데이터를 받거나 입력하는등 기능적인 역할을 하는 태그입니다.
주로 서버스크립트와 함께 쓰입니다.
중요하기 때문에 꼭 잘 사용할 수 있도록 배워두어야 합니다.
텍스트 필드
<input type="text" name="이름" value="값" disabled="disabled" readonly="readonly" />
disabled는 폼을 불능화시킵니다.
readonly는 값을 입력하지는 못하지만 이미 입력되어 있는 값은 서버로 전송됩니다.
[사용예]
<form action="url" method="GET">
이름:
<input type="text" name="uname" value="jwlee" disabled="disabled" readonly="readonly" /><br>
<input type="submit" />
</form>
비밀번호
<input type="password" name="passwoed" />
이런 식으로 작성하면 입력하는 글자가 안보입니다.
hidden data
화면상에 표시되지 않는 컨트롤을 생성.
서버로 전달할 내용이지만 사용자에게 노출되지 않아야 하는 데이터를 넘길때 사용됩니다.
서버측언어와 함께 사용되는 기법입니다.
<input type="hidden" name="이름" />
textarea
여러줄의 텍스트를 입력할 때 사용하는 태그
<textarea name="이름" rows="행의 수" cols="열의 수" disabled="disabled" readonly="readonly">값</textarea>rows는 입력한 행의 수
colss는 입력한 행의 수
radio버튼
<input type="radio" name="이름" value="값" checked="checked">이것은 여러개 중에 한개를 선택하는 요소입니다. 라디오버튼을 만드는 것입니다.[사용예]
<form action="example.php" method="POST">
취미 : <br />
<input type="radio" name="favorites" value="music" checked="checked"> 음악감상<br />
<input type="radio" name="favorites" value="reading"> 독서<br />
<input type="radio" name="favorites" value="sports"> 스포츠<br />
<input type="submit" />
</form>
checked표시는 기본적으로 선택되어 있는 값입니다.
콤보박스
<select name="이름" multiple="multiple"> <option value="선택될 경우 name의 값이 됨" selected="selected">값에 대한 표시값</option> ...option 반복</select>multiple을 속성으로 지정하면 여러개의 항목중에서 하나를 선택할 수 있는 박스입니다.
[사용예]
<form action="example.php" method="POST">
취미 : <br />
<select name="favorites">
<option value="music">음악감상</option>
<option value="reading" selected="selected">독서</option>
<option value="sports">스포츠</option>
</select>
</form>
체크박스
<input type="checkbox" name="이름" value="값">여러개 중에서 다중으로 선택할 수 있는 박스입니다.
[사용예]
<form action="example.php" method="POST">
취미 : <br />
<input type="checkbox" name="favorites[]" value="music"> 음악감상<br />
<input type="checkbox" name="favorites[]" value="reading"> 독서<br />
<input type="checkbox" name="favorites[]" value="sports" checked="checked"> 스포츠<br />
<input type="submit" />
</form>
'WEB_TECH > (x)HTML' 카테고리의 다른 글
| meta 태그란 (0) | 2013.04.29 |
|---|---|
| 이스케이핑에 대해서 알아봅시다 (0) | 2013.04.29 |
| DTD란 무엇인가? (0) | 2012.10.31 |
| XHTML 작성법 (0) | 2012.10.31 |
| iframe 태그에 대해 알아봅시다. (0) | 2012.10.24 |