1) 회원가입 입력폼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tittle>회원가입</tittle>
</head>
<body>
<h2>input 속성 예제</h2>
<form method="get" action="form_app.php">
<fieldset>
<p>
<strong>아이디</strong>
<input type="text" name="name" value="아이디 입력">
</p>
<p>
<strong>비밀번호</strong>
<input type="password" name="password" value="비밀번호 입력">
</p>
<p>
<strong>이메일</strong>
<input type="email" name="email" value="비밀번호 입력">
</p>
<p>
<strong>성별</strong>
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자
</p>
<p>
학년:
<select name="grade" size="1" multiple>
<option value="1_grade" selected>1학년</option>
<option value="2_grade" selected>2학년</option>
<option value="3_grade" selected>3학년</option>
<option value="4_grade" selected>4학년</option>
</select>
</p>
</fieldset>
<hr>
<input type="submit" value="확인">
<input type="reset" value="취소">
</form>
</body>
</html>- <form> 태그는 웹페이지의 입력약식을 의미한다. 속성으로 name,action,method 등...이 있다.
- method 속성은 폼 전송 방식을 의미한다.(GET/POST)
- <input> 태그는 사용자로부터 양식을 입력받는 태그이다. 속성은 아래와 같은 것들이 있다.
-
text: 일반 문자
-
password: 비밀번호
-
button: 버튼
-
submit: 양식 제출용 버튼
-
reset: 양식 초기화용 버튼
-
radio: 한개만 선택할 수 있는 컴포넌트
-
checkbox: 다수를 선택할 수 있는 컴포넌트
-
file: 파일 업로드
-
hidden: 사용자에게 보이지 않는 숨은 요소
2) 설문조사폼 & 시간선택 폼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tittle>설문조사&시간선택</tittle>
</head>
<body>
<h2></h2>
<form method="get" action="form_app.php">
<fieldset>
<legend>설문조사</legend>
5점척도로 답하시오 1<input type="range" min="1" max="5" value="3">5
</fieldset>
<fieldset>
<legend>예약시간 선택</legend>
<input type="date" name="r_date" mcoursein="2020-04-26">
<input type="time" name="r_time" min="09:00" max="21:00">
</fieldset>
</form>
</body>
</html>
- <legend> 태그는 <fieldset> 요소의 캡션(caption)을 정의할 때 사용한다.
'Front-end > Web' 카테고리의 다른 글
| PHP 사용 기초 (0) | 2020.09.06 |
|---|---|
| JavaScript 기초 (사칙연산,switch,for,while,if-else) (0) | 2020.09.05 |
| 고급표현을 위한 CSS 활용 (0) | 2020.09.05 |
| CSS3 스타일시트 기초 (0) | 2020.09.05 |
| 링크와 멀티미디어 (0) | 2020.09.05 |
댓글