5. FORM 태그
페이지 정보
작성자 관리자 댓글 0건 조회 509회 작성일 22-01-05 21:25본문
5. FORM 태그
1. FORM 태그
실습 : form1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 태그</title>
</head>
<body>
<form action="#" method="get" name="form1">
<ul type="none">
<!--이름 입력-->
<li>이름 : <input type="text" id="userName"></li><br/>
<!--주소 입력-->
<li>주소 : <input type ="text" id="address"></li><br/>
<!--가입버튼-->
<li><input type="submit" value="가입하기"></li>
</ul>
</form>
</body>
</html>
Form 태그 옵션
action: 서버에서 동작하는 스크립트 파일을 지정
method : 서버에 form에서 입력받은 데이터를 전송할 때 사용하는 전송 방식을 지정한다. get, post
name : 한문서에 여러개의 폼이 있을 경우 폼을 구분하기 위한 이름을 지정한다.
target : action에서 지정한 파일의 실행 창을 현재창으로 할지 아니면 다른 창에서 실행되도록 할지를 지정한다.
2. Form 요소 그룹
실습 : form2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 요소 그룹</title>
</head>
<body>
<header>
<h1>회원 가입 양식</h1>
</header>
<form action="#" method="get" name="form1">
<ul type="none">
<li>아이디 :<input type="text" id="userId"></li>
<li>비밀번호 :<input type="text" id="userPw"></li>
<li>이름 : <input type="text" id="userName"></li>
<li>주소 : <input type="text" id="address"></li>
</ul>
</form>
</body>
</html>
다음과 같이 수정한다.
실습 : form2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 요소 그룹</title>
</head>
<body>
<header>
<h1>회원 가입 양식</h1>
</header>
<form action="#" method="get" name="form1">
<fieldset>
<ul type="none">
<li>아이디 :<input type="text" id="userId"></li>
<li>비밀번호 :<input type="text" id="userPw"></li>
<ul>
</fieldset>
<fieldset>
<ul type="none">
<li>이름 : <input type="text" id="userName"></li>
<li>주소 : <input type="text" id="address"></li>
</ul>
</fieldset>
</form>
</body>
</html>
실습 : form2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 요소 그룹</title>
</head>
<body>
<header>
<h1>회원 가입 양식</h1>
</header>
<form action="#" method="get" name="form1">
<fieldset>
<legend>로그인 정보</legend>
<ul type="none">
<li>아이디 :<input type="text" id="userId"></li>
<li>비밀번호 :<input type="text" id="userPw"></li>
<ul>
</fieldset>
<fieldset>
<legend>가입자 정보</legend>
<ul type="none">
<li>이름 : <input type="text" id="userName"></li>
<li>주소 : <input type="text" id="address"></li>
</ul>
</fieldset>
</form>
</body>
</html>
<label> 태그를 추가한다.
실습 : form2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 요소 그룹</title>
</head>
<body>
<header>
<h1>회원 가입 양식</h1>
</header>
<form action="#" method="get" name="form1">
<fieldset>
<legend>로그인 정보</legend>
<ul type="none">
<li><label>아이디 :<input type="text" id="userId"></label></li>
<li><label>비밀번호 :<input type="text" id="userPw"></label></li>
<ul>
</fieldset>
<fieldset>
<legend>가입자 정보</legend>
<ul type="none">
<li><label>이름 : <input type="text" id="userName"></label></li>
<li><label>주소 : <input type="text" id="address"></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
<label> 태그는 결과는 같게 출력 된다.
실습 : form2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 요소 그룹</title>
</head>
<body>
<header>
<h1>회원 가입 양식</h1>
</header>
<form action="#" method="get" name="form1">
<fieldset>
<legend>로그인 정보</legend>
<ul type="none">
<li><label>아이디 :<input type="text" id="userId"></label></li>
<li><label>비밀번호 :<input type="text" id="userPw"></label></li>
<ul>
</fieldset>
<fieldset>
<legend>가입자 정보</legend>
<ul type="none">
<li><label>이름 : <input type="text" id="userName"></label></li>
<li><label>주소 : <input type="text" id="address"></label></li>
<li>
<label for="email">이메일 : </label>
<input type="text" id="email">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.