고정 헤더 영역
상세 컨텐츠
본문
반응형
<form> 태그 - 폼 만들기
<form [속성="속성 값"]>폼 요소</form><form> 태그 속성 값
- method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
- get : 주소 표시줄에 사용자가 입력한 값이 그대로 드러난다.
- post : 사용자의 입력을 표준 입력(standart input)으로 넘겨주기 때문에 입력한 내용의 길이에 제한을 받지 않고, 입력한 내용이 드러나지 않는다.
- name : 폼의 이름을 지정한다.
- action : <form> 태그 안의 내용들을 처리해줄 서버 상의 프로그램을 지정한다.
- target : <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도로 지정한다.
- autocomplete 속성 - 자동 완성 기능
- 검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것이다.
- 속성을 'off'로 지정해 자동 완성 기능을 끌 수도 있다.
<form action="register.php" autocomplete="off">
--
</form><label> 태그 - 폼 요소에 레이블 붙이기
- 폼 요소에 레이블을 붙이기 위해 사용된다.
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>폼 태그</title>
</head>
<body>
<form>
<label for="textid">레이블</label>
<input type="text" id="textid" value="텍스트"/>
</form>
</body>
</html>- 라디오 버튼과 체크박스에서 사용하는 <label> 태그
- 라디오 버튼이나 체크박스를 클릭 안하고, 옆에 있는 텍스트를 클릭하면 해당 버튼이 선택된다.
실행 화면
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>폼 태그</title>
</head>
<body>
<form>
<ul>
<li>
<label><input type="radio" name="subject" value="english">영어</label>
</li>
<li>
<label><input type="radio" name="subject" value="china">중국어</label>
</li>
<li>
<label><input type="radio" name="subject" value="japan">일본어</label>
</li>
</ul>
</form>
</body>
</html>실행 화면
<fielddset>, <legend> 태그 - 폼 요소 그룹으로 묶기
- 사용자 정보를 수정하는 화면에서 '필수 정보'와 '선택 정보'를 나누어 표시하면 사용자가 정보를 입력하기에 편리하고 화면도 깔끔하게 정리할 수 있다.
- 하나의 폼 안에서 여러 구역으로 나누어 표시하려고 할 때 <fieldset>, <legend> 태그를 사용한다.
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>폼 태그</title>
</head>
<body>
<form>
<form>
<fieldset>
<legend>필수 정보</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name" />
</li>
<li>
<label for="email">메일 주소</label>
<input type="text" id="email" />
</li>
</ul>
</fieldset>
<fieldset>
<legend>선택 정보</legend>
<ul>
<li>
<label for="hobby">취미</label>
<input type="text" id="hobby" />
</li>
<li>
<label for="etc">기타</label>
<input type="text" id="etc" />
</li>
</ul>
</fieldset>
</form>
</form>
</body>
</html>실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [HTML 기초] 사용자 입력을 위한 <input> 태그 (2) (0) | 2021.04.05 |
|---|---|
| [HTML 기초] 사용자 입력을 위한 <input> 태그 - 1 (0) | 2021.04.02 |
| [HTML 기초] 링크 만들기 (0) | 2021.03.30 |
| [HTML 기초] 목록을 만드는 태그 (0) | 2021.03.29 |
| [HTML 기초] 텍스트를 한 줄로 표시하는 태그 (0) | 2021.03.28 |
댓글 영역