이번엔 입력 양식 태그인 <form>태그에 대해 알아보겠습니다.
#1 <form>태그
설문조사나 회원가입 등 사용자에게 어떠한 값을 받을 때 사용하는 폼(양식)이라고 생각하면 됩니다.
<input>태그들을 나열하기 위해 <form>태그를 사용합니다.
속성
- action: form의 데이터가 전송되는 페이지
- method: 데이터 전송 설정
→ GET / POST GET : 데이터가 주소에 표시되면서 전송됩니다.
→ POST : 데이터가 헤더에 숨어 전송되기 때문에 보안성이 높습니다.
표시 방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <body> <form action="login.html" method="POST"> </form> </body> </html> | cs |
form 속성인 action(데이터가 전송되는 페이지)과 method(데이터 숨김)를 사용했습니다.
#2 form 요소 태그
① <label>태그 : form의 설명글
① <input>태그: 입력양식
② <fieldset>태그 : 폼을 그룹화하여 시각적으로 보여줌
② <legend>태그 : fieldset의 제목, fieldset과 같이 사용
② <textarea>태그 : 장문 입력
③ <select>, <option>태그 : 펼침 선택 목록
③ <optgroup>, <option>태그 : 옵션 그룹
④ <datalist>태그 : 선택, 값 입력 동시 가능
#① <label>태그와 <input>태그
로그인 양식을 만들기 전 input태그 속성 종류는 다음과 같습니다.
<input>태그 속성
- text: 글자 입력란
- password: 비밀번호 입력란
- button: 버튼 생성
- submit: 제출 버튼 생성
- checkbox: 체크박스 생성
- radio: 라디오 버튼 생성
- file: 파일 입력 양식
- hidden: 숨김
- image: 이미지 생성
- reset: 초기화 버튼 생성
아주 간단한 로그인 양식을 만들어보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action="login.html" method="POST"> <label>아이디 <input type="text"> </label> <label>비밀번호 <input type="text"> </label> <input type="submit" value="로그인"> </form> </body> </html> | cs |
위와 같이 <label>태그 안에 text속성의 <input>값을 넣어주면
입력란을 클릭하지 않고도 label 글자인 '아이디', '비밀번호'를 클릭하면 입력란에 커서가 생깁니다.
* 는 한 칸 띄어씁니다.
굳이 <label>태그에 <input>태그를 그룹화하지 않아도 똑같이 만들 수 있습니다.
id, for 속성을 활용하면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action="login.html" method="POST"> <label for="userid">아이디</label> <input type="text" id="userid" name="userid"> <label for="userPwd">비밀번호</label> <input type="text" id="userPwd" name="userPwd"> <input type="submit" value="로그인"> </form> </body> </html> | cs |
<input>태그에 id를 설정하고 <label>태그에 for="해당 input id" 를 지정해주면 됩니다.
#② <fieldset>, <legend>, <textarea>태그
<fieldset>태그는 폼(양식)이 그룹화한 것을 시각적으로 보여줍니다.
<legend>태그는 fieldset의 제목을 표시합니다.
<textarea>태그는 장문 입력란입니다.
속성
- row 속성 : 문장 줄 수
- cols 속성 : 너비
<fieldset> 안에 <legend>와 <textarea>를 넣어보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <fieldset> <legend>내용</legend> <textarea rows="5" cols="50">test</textarea> </fieldset> </form> </body> </html> | cs |
<fieldset>안에 제목인 '내용'이 들어갔고, 5문장 너비50의 장문 입력란이 들어갔습니다.
#③ <select>, <optgroup>, <option>태그
<select>는 선택 목록(박스)이며 <option>은 select의 옵션 리스트입니다.
<optgroup>태그는 옵션들을 그룹화시켜주는 태그입니다.
속성
- selected : 지정한 목록 미리 선택
- size : 선택옵션 갯수 지정
- multiple : 2개 이상 선택
fieldset에 넣어보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <fieldset> <legend>숫자 선택</legend> <select> <option value="A">1</option> <option value="B">2</option> <option value="C">3</option> <option value="D">4</option> <option value="E">5</option> </select> </fieldset> </form> </body> </html> | cs |
size, multiple, selected 속성을 전부 사용해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <fieldset> <legend>숫자 선택</legend> <select size="2" multiple=""> <option value="A">1</option> <option value="B" selected="">2</option> <option value="C">3</option> <option value="D">4</option> <option value="E">5</option> </select> </fieldset> </form> </body> </html> | cs |
size속성으로 select(선택 박스) 크기를 2로 늘려줬고,
multiple속성으로 2개 이상 선택하도록 하였으며
selected속성으로 2번이 이미 선택되어 창이 뜨게했습니다.
이번엔 <optgroup>태그를 사용해 1개의 <select>박스에 2개의 옵션 그룹을 넣어보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <fieldset> <legend>선택</legend> <select> <optgroup label="숫자"> <option value="A">1</option> <option value="B" selected="">2</option> <option value="C">3</option> <option value="D">4</option> <option value="E">5</option> </optgroup> <optgroup label="과일"> <option value="A">사과</option> <option value="B">바나나</option> <option value="C">오렌지</option> <option value="D">포도</option> <option value="E">키위</option> </optgroup> </select> </fieldset> </form> </body> </html> | cs |
아까 전과 다른 점이 없어보이지만 화살표를 클릭하면
옵션들이 숫자, 과일로 그룹화되어 나뉘어져있는 것을 확인할 수 있습니다.
#④ <datalist>태그
<select>태그 없이 <option>의 속성 value값을 이용해 리스트를 만들어보겠습니다.
먼저 <datalist>에 id를 줍니다.
<input>에 type속성 대신 list속성을 넣어주고 <datalist> id 이름을 넣어줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <fieldset> <legend>거주지</legend> <input list="address-list"> <datalist id="address-list"> <option value="서울"></option> <option value="부산"></option> <option value="울산"></option> <option value="광주"></option> </datalist> </fieldset> </form> </body> </html> | cs |
선택 목록 창이 완성되었습니다.
'IT > HTML' 카테고리의 다른 글
| HTML-input태그 #2 (0) | 2020.12.09 |
|---|---|
| HTML-input태그 #1 (0) | 2020.12.09 |
| HTML5 - 테이블 태그 (0) | 2020.11.26 |
| HTML5 - 리스트(목록) 태그 (0) | 2020.11.26 |
| HTML&CSS-위치 변경하기 (0) | 2020.11.25 |
댓글