입력 양식이란 사용자에게 입력받는 공간을 의미한다.
입력 양식은 form 태그를 사용해 생성한다.
<body>
<form>
</form>
</body>| 속성 이름 | 설명 |
| action | 입력 데이터의 전달 위치를 지정 |
| method | 입력 데이터의 전달 방식을 선택 |
form태그에 지정된 action 속성의 장소로 method 속성에 적힌 방식으로 전달이 된다.
method 속성에서 자주 사용되는 것은 get과 post이다.
get 방식은 주소에 데이터를 입력해서 보내는 방식을 말하고 post는 get방식과 달리 비밀스럽게 데이터를 전달하는
방식이다.
예를 들어서 회원가입을 할 때 아이디를 입력하고, 비밀번호를 입력하는 것은 비밀스럽게 해야 하므로 post 방식을 사용한다고 생각하면 된다.
input 태그
사용자에게 정보를 입력받는 기능을 수행하는 태그를 말한다.
| 속성값 | 설명 |
| button | 버튼 생성 |
| checkbox | 체크박스 생성 |
| file | 파일 입력 양식 생성 |
| hidden | 보이지 않음 |
| password | 비밀번호 입력 양식 생성 |
| radio | 라디오 버튼 생성 |
| reset | 초기화 버튼 생성 |
| submit | 제출 버튼 생성 |
| text | 글자 입력 양식을 생성 |
| image | 이미지 형태를 생성 |
label 태그
input 태그를 설명하는 데 사용한다.
<body>
<form>
<label>아이디</label>
<input type = "text"/>
</form>
</body>
HTML5 입력 양식의 속성 값
| 속성값 | 설명 |
| color | 색상 선택 |
| date | 일 선택 |
| datetime | 날짜 선택 |
| datetime-local | 지역 날짜 선택 |
| month | 월 선택 |
| number | 숫자 선택 |
| range | 범위 선택 |
| 이메일 입력 | |
| search | 검색어 입력 |
| tel | 전화번호 입력 |
| time | 시간 선택 |
| week | 주 선택 |
| url | URL 주소 입력 |
<실습>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>form 태그</h1>
<form action = "/action_page.html"
method = "get">
ID : <input type = "text" name = "id">
<br>
PW : <input type = "password" name = "pw">
<br>
<input type = "submit">
<input type = "reset">
</form>
<h1>form 태그</h1>
<form action = "/action_page.html"
method = "post">
<fieldset>
<legend>로그인</legend>
ID : <input type = "text" name ="id" placeholder ="아이디" >
<br>
PW : <input type = "password" name = "pw">
<br>
<input type = "submit">
<input type = "reset">
</fieldset>
</form>
<hr>
<hr>
<form action = "/action_page.html" method = "get">
<fieldset>
<legend>NUMBER</legend>
<input type = "number" min="1" max="100" step="2" value="1">
</fieldset>
<fieldset>
<legend>읽기전용</legend>
<input type = "text" name="test1" value="hi" readonly>
<input type = "file" multiple> <!--파일선택, 다중선택-->
</fieldset>
</form>
<br>
<br>
<hr>
<form action ="/action_page.html" method="get">
<fieldset>
<legend>기본 input</legend>
<input type ="checkbox" name="hobby" value="게임"> 게임
<input type ="checkbox" name="hobby" value="잠"> 잠자기
<input type ="checkbox" name="hobby" value="등산"> 등산
<br>
<input id = "M" type ="radio" name="gender" value="남"><label for="M">남자</label>
<input id = "F" type ="radio" name="gender" value="여"><label for="F">여자</label>
<br>
<select name = "sel">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3" selected>3</option>
<option value = "4">4</option>
</select>
<br>
<br>
</fieldset>
<form action = "action_page.html" method ="get">
<fieldset>
<legend>HTML5 type</legend>
<input type = "color" name="color"><br>
<input type = "date">
<input type ="datetime-local"><br>
<input type = "week">
<input type = "email" required><br>
<input type = "submit"><br>
Downloading progress :
<progress value ="22" max="100"></progress><br>
<input type ="range" min="1" max="100" value="20">
<!-- range 크롬에서 잘 안보임-->>
<br>
<button type ="submit">아이디중복체크</button><br>
<textarea rows="10" cols ="70"></textarea>
</fieldset>
</form>
</form>
</body>
</html>
form 태그
form 태그
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 8. CSS 선택자 (0) | 2019.09.16 |
|---|---|
| <이공계기술전문연수> 7. HTML textarea 태그 / select 태그 / fieldset태그 / legend 태그 / 공간 분할 태그 (0) | 2019.09.10 |
| <이공계전문기술연수> 5. HTML 이미지 태그 / 오디오 태그 / 비디오 태그 (0) | 2019.09.09 |
| <이공계전문기술연수> 4. HTML 테이블 태그(table tag) (0) | 2019.09.08 |
| <이공계전문기술연수> 3. HTML 웹의 역사 / tag / 이클립스(Eclipse)(2) (0) | 2019.09.07 |
