코밍이의 하루

[HTML5] 폼 만들기 본문

웹언어 공부/HTML5

[HTML5] 폼 만들기

코밍이 2021. 8. 19. 01:37

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 주요 문법

1) <form> 태그

- 폼을 만드는 가장 기본적인 태그

- <form> 태그와 </form> 태그 사이에 여러 폼 요소와 관련된 태그를 넣음.

 

2) form 태그의 속성

속성 설명
method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
속성 값 get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나며 256byte~4096byte까지의 데이터만 서버로 넘길 수 있음
post - 대부분 post 방식을 사용하며 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않음
name 폼의 이름 지정, 한 문서 안에 여러 개의 <fome>태그가 있을 경우 폼 구분을 위해 사용
action <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램 지정
target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

 

3) autocomplete 속성

- 자동 완성 기능

기본형
<form action="register.php" autocomplete="off">
  .........
</form>

 

4) <label> 태그

- 폼 요소에 레이블 붙이기

- 라디오 버튼이나 체크박스에 사용 시 텍스트만 터치해도 선택될 수 있음

※ 레이브(label) : 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트

기본형
① <label>아이디<input type="text"></label>
② <label for="user_id">아이디</label>
    <input type="text" id="user_id">

 

5) <fieldset>, <legend> 태그

- <fieldset> 태그는 <fieldset> 태그 사이의 폼들을 하나의 영역으로 묶음

- <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여줌

 

3. 소스 코드 및 실행 화면

- form.html

<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>HTML5 폼</title>
	</head>
	<body>
		<form action="search.php" method="post">
			<input type="text" title="검색">
			<input type="submit" value="검색">
		</form>
	</body>
</html>

form.html

- withlabel.html

<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>label 태그 사용</title>
			<style>
				ul {
					list-style:none;
				}
				li {
					margin:20px;
				}
			</style>
	</head>
	<body>
		<form>
			<h3>수강 분야(다수 선택 가능)</h3>
			<ul>
				<li><input type="checkbox" value="grm">문법	</li>
				<li><input type="checkbox" value="wr">작문</li>
				<li><input type="checkbox" value="rd">독해</li>
			</ul>
			<h3>수강 과목(1과목만 선택 가능)</h3>
			<ul>
				<li>
					<label><input type="radio" name="subject" value="eng">영어회화</label>
				</li>
				<li>
					<label><input type="radio" name="subject" value="ch">중국어회화</label>
				</li>
				<li>				
					<label><input type="radio" name="subject" value="jp">일어회화</label>
				</li>
			</ul>
		</form>
	</body>
</html>

withlabel.html

- fieldset.html

<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>filedset과 legend 태그</title>
			<style>
				ul {
					list-style:none;
				}
				li {
					margin:20px;
				}
				li label {
					width:80px;
					float:left;
				}
				fieldset {
					margin:15px;
				}
			</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>개인 정보</legend>
				<ul>
					<li>
						<label for="name">이름</label>
						<input type="text" id="name">
					</li>
					<li>
						<label for="mail">메일 주소</label>
						<input type="text" id="mail">
					</li>
				</ul>
			</fieldset>		
			<fieldset>
				<legend>로그인 정보</legend>
				<ul>
					<li>
						<label for="id">아이디</label>
						<input type="text" id="id">
					</li>
					<li>
						<label for="pwd">비밀번호</label>
						<input type="text" id="pwd">
					</li>
				</ul>
			</fieldset>
		</form>
	</body>
</html>

fieldset.html

저작자표시 비영리 변경금지

'웹언어 공부 > HTML5' 카테고리의 다른 글

[HTML5] <input> 태그의 다양한 속성  (0) 2021.08.26
[HTML5] 사용자 입력을 위한 <input> 태그  (0) 2021.08.19
[HTML5] SVG 이미지  (0) 2021.08.16
[HTML5] 링크 만들기  (0) 2021.08.16
[HTML5] 이미지  (0) 2021.08.16
'웹언어 공부/HTML5' Related Articles more