6. FORM 속성
페이지 정보
작성자 관리자 댓글 0건 조회 524회 작성일 22-01-05 21:49본문
6. FORM 속성
1. radio
실습 : form3.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 id="register">
<legend>수강 과목 선택</legend>
<ul type="none">
<li>
<label>
<input type="radio" name="language" value="english" checked>영어
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="france">프랑스어
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="deuch">독일어
</label>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
2. checkbox
실습 : form3.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 id="register">
<legend>수강 과목 선택</legend>
<ul type="none">
<li>
<label>
<input type="radio" name="language" value="english" checked>영어
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="france">프랑스어
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="deuch">독일어
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>관심분야<small>(다수선택가능)</small></legend>
<ul type="none">
<li>
<input type="checkbox" name="multicheck" value="grammer">문법
</li>
<li>
<input type="checkbox" name="multicheck" value="voca">어휘
</li>
<li>
<input type="checkbox" name="multicheck" value="speaking">회화
</li>
<li>
<input type="checkbox" name="multicheck" value="listening">리스닝
</li>
</ul>
</fieldset>
</form>
</body>
</html>
3. url, tel, email
실습 : form4.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 속성</title>
</head>
<body>
<header>
<h1>url, tel, email</h1>
</header>
<form action="#" method="get" name="form1">
<ul type="none">
<li>
<label>홈페이지 주소 : <input type="url"></label>
</li>
<li>
<label>이메일 주소 : <input type="email"></label>
</li>
<li>
<label>전화번호 : <input type="tel"></label>
</li>
</ul>
</form>
</body>
</html>
4. number, range, color, datetime
실습 : form5.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form 속성</title>
</head>
<body>
<header>
<h1>number, range, color, datetime</h1>
</header>
<form action="#" method="get" name="form1">
<legend>등록 정보</legend>
<ul type="none">
<li>
<label for = "member">회원수</label>
<small>(최대10명)</small>
<input type="number" id="member" value="1" min="0" max="10" step="1">
</li>
<li>
<label for="step">단계</label>
<small>(상, 중, 하)</small>
<input type="range" id="step" value="1" min="1" max="5">
</li>
<li>
<label for="color">원하는 색상</label>
<input type="color" id="color">
</li>
<li>
<label for="date">날짜설정</label>
<input type="date" id="date">
</li>
<li>
<label for="time">시간설정</label>
<input type="time" id="time" value="08:00">
</li>
<li>
<label for="email">이메일</label>
<input type="email" id="email" required>
</li>
<li>
<input type="text" value="안녕" readonly>
<input type="submit" value="등록">
</li>
</ul>
</form>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.