1. 웹에서 자주 만나는 폼
① 회원가입, 로그인, 쇼핑몰의 주문화면 등 웹 사이트로 정보를 보낼 수 있는 요소들을 폼(form)이라고 함
2. 폼의 동작 방식
① 사용자가 아이디와 비밀번호 입력 후 로그인 버튼 클릭
② 사용자가 입력한 아이디와 비밀번호가 웹 서버로 전송
③ 서버에서 사용자 데이터베이스를 검색해서 사용자가 전송한 아이디와 비밀번호가 서로 일치하는지 확인 후 결과를 브라우저로 리턴
④ 일치하는 정보가 사용자 데이터베이스에 있을 경우 로그인 성공, 아니면 로그인 실패 화면으로 이동
3. <form> 태그 – 폼 만들기
① <form>은 폼을 만드는 가장 기본적인 태그
② <form>~</form> 사이에 여러 폼 요소 관련 태그 주입
③
<form [속성="속성 값"]>여러 폼 요소</form>
4. <form> 태그에서 사용하는 속성들
<예제 – form-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 폼</title>
</head>
<body>
<!--form>input*2-->
<!--action속성 : form태그가 전송될 서버의 프로그램이나 메소드 지정-->
<form action="search.php" method="post">
<input type="text" title="검색">
<!--submit : form의 action을 동작시킴-->
<input type="submit" title="검색">
</form>
</body>
</html>
5. <label> 태그 – 폼 요소에 레이블 붙이기
① 레이블(label)이란 입력 창 옆에 ‘아이디’나 ‘비밀번호‘처럼 붙여놓은 텍스트를 의미
② 방법 1. <label> ~ </label> 태그 안에 폼 요소인 <input> 태그 넣기
<label>아이디(6자 이상)<input type="text" ...></label>③ 방법 2. <label> 태그와 폼요소인 <input> 태그를 따로 사용하고 <label> 태그에 for 속성 이용하기
<label for "user-id">아이디(6자 이상)</label>
<input type="text" id="user-id">
<예제 – label-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label 태그 사용</title>
<style>
ul {
list-style: none;
}
li {
margin: 20px;
}
li label {
width: 70px;
float: left;
font-size: 14px;
font-weight: bold;
line-height: 25px;
}
</style>
</head>
<body>
<!--form>ul>(li>(label+input))*2+(li>input)-->
<form action="login.php" method="POST">
<ul>
<li>
<!--label : input에 텍스트 붙이는 태그-->
<!--for속성 : input의 id속성과 매핑-->
<label for="id">아이디</label>
<input type="text" id="id">
</li>
<li>
<label for="pw">비밀번호</label>
<input type="password" id="pw">
</li>
<li>
<input type="submit" title="로그인" value="로그인">
</li>
</ul>
</form>
</body>
</html>
6. 라디오 버튼과 체크박스에서 <label> 태그
① 스마트폰 같은 작은 화면에서 라디오버튼이나 체크박스를 정확히 선택하기 힘든데 <label> 태그와 연결하여 사용하면 <label> 태그안에 텍스트만 클릭 또는 터치해도 라디오버튼과 체크박스 선택 가능
<예제 – withlabel-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label 태그 사용</title>
<style>
ul {
list-style: none;
}
li {
margin: 20px;
}
</style>
</head>
<body>
<!--form>(h3+(ul>(li>input)*3)+h3+(ul>(li>label>input)*3))-->
<form>
<h3>수강 분야(복수 선택 가능)</h3>
<ul>
<li>
<input type="checkbox" value="grm">문법
</li>
<li>
<input type="checkbox" value="작문">작문
</li>
<li>
<input type="checkbox" value="독해">독해
</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>
7. <fieldset>, <legend> 태그 – 폼 요소 그룹으로 묶기
① 쇼핑몰 사이트에서 주문서 폼에서 사용자 정보와 배송 정보를 분리하여 표시하는 것을 흔히 발견할 수 있는데
이렇게 하나의 폼 안에 여러 구역을 나누어 표시할 때 <fieldset>, <legend> 태그 사용
② 형태 :
<fieldset [속성="속성 값"] > ... </fieldset>③ <fieldset> ~ </fieldset> 안의 폼 요소들을 하나의 영역으로 묶고 외곽선을 그려줌
④ <legend> 태그는 <fieldset>으로 묶은 그룹에 제목을 붙여줌
<예제 – fieldset-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fieldset과 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+(ul>(li>label+input)*2))*2-->
<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>
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 04-3 <input> 태그의 다양한 속성 (0) | 2021.09.05 |
|---|---|
| [HTML] 04-2 사용자 입력을 위한 <input> 태그 (0) | 2021.09.05 |
| [HTML] 03-3 SVG 이미지와 Modernizr (0) | 2021.09.05 |
| [HTML] 03-2 링크 만들기 (0) | 2021.09.05 |
| [HTML] 03-1 이미지 (0) | 2021.09.05 |
댓글