HTML & CSS
[211015] 폼 관련 태그 (Input)
감자탈출기
2021. 10. 15. 21:41
폼 관련 태그
▶ <form></form>
사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그
▷ 속성
| method | get : URL창에 데이터를 보내는 방식 data크기에 제한이 있음(256~4096byte) data를 볼 수 있음 post : http request에 data를 넣어 보내는 방식 data크기에 제한이 없음 data를 볼 수 없음 |
| name | <form>태그의 고유 이름 지정, <form>을 구분하기 위해 사용 |
| action | 데이터를 처리 할 프로그램(페이지)을 지정 |
| target | action속성의 프로그램(페이지)를 어떻게 열지 지정 |
| autocomplete | 이전 입력내용 출력하는 기능 생략하면 자동으로 출력(default : on) |
method(get/post) 차이
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <input type="text" name="v1"> <button type="submit">GET 전송</button> </form> <form action="" method="POST"> <input type="text" name="v2"> <button type="submit">POST 전송</button> </form> </body> </html> |
http://localhost/chap02/example1.html?v1=1234
? 다음에 오는 것이 서버에 보낸 데이터이다.
▶ <fieldset></fieldset>, <legend></legend>
폼 요소를 그룹으로 묶고 묶은 폼 요소에 명칭을 붙이는 태그
| <form action=“프로그램(페이지)” method=“방식”> <fieldset name=“이름“> <legend>명칭<legend> <input type…> … </fieldset> </form> |
▷ 속성
name : fieldset의 이름 지정
form : fieldset이 속한 form의 이름 지정
fieldset, legend 실습
| <h1>fieldset, legend 태그</h1> <form action="" method="GET"> <fieldset> <legend>서버에 전송할 데이터</legend> <input form="f1" type="text" name="v4"> <input form="f1" type="text" name="v5"> <button type="submit">전송</button> </fieldset> </form> <hr><!-- 형식 헷갈리므로 권장하지 않음 -->[211015.16:56 모질라] <h1>fieldset, legend 태그</h1> <fieldset disabled> <legend>서버에 전송할 데이터</legend> <input form="f1" type="text" name="v6"> <input form="f1" type="text" name="v7"> </fieldset> <form id="f1" action="" method="GET"> <button type="submit">전송</button> </form> |
▶ <input>
사용자로부터 data를 입력 받기 위한 태그
▷ 속성 (공통 속성은 아님, 타입에 따라 적용되는 않는 속성도 있다.)
type : 입력 창의 타입을 결정하는 속성 (text, checkbox, radio 등)
value : input요소의 기본 값 표시
name : input을 구별할 수 있는 명칭
min/max/step : 허용하는 범위 최소값/최대값/값의 증감값
autocomplete : 자동 완성 기능
height/width : 입력 창의 높이와 너비
readonly : 읽기 전용 필드
accept : 파일 타입에 대해 사용자에게 알려주는 기능
multiple : 여러 개의 값 입력 가능
placeholder : 사용자 입력 전 입력 창 표시 글
autofocus : 입력 창 커서 표시
required : 필수 입력 필드 지정
list : <datalist>의 옵션 값을 <input>안에 나열
maxlength : 사용자가 입력할 수 있는 글자수 제한
size : 화면에서 표시하는 글자 수
minlength : 최소 입력 글자(최신 크롬, 안드로이드만 지원)
formaction : 실행할 프로그램 연결, submit/image일 때 사용
formenctype : 전송 시 어떤 방식으로 해석할 지 지정, submit/image일 때 사용
formnovalidate : 전송 시 데이터가 유효한지 여부 표시
formtarget : 서버의 응답을 어디에 표시할 것인지 지정
▷ type 기본 속성
text : 한 줄짜리 텍스트 입력 창이 생김
password : 비밀 번호 입력 창, 입력 시 ●●●으로 표시
hidden : 사용자에게 보이지는 않지만 값을 넣을 수 있는 창, 관리자에게 필요한 값을 넣을 때 사용
button : 버튼 생성, 자체 별도 기능은 없고 스크립트에서 함수 연결하여 활용
checkbox : 체크 박스 생성
file : 파일 입력 양식 출력
image : 이미지 형태 생성
radio : 라디오 버튼 생성
submit : 입력한 데이터를 다른 페이지로 넘기는 기능
reset : 입력한 내용을 지우는 기능
cf. name, id : 어떠한 태그에서든 사용 가능
input 태그 실습
| <h1>input 태그</h1> <form action="" method="GET"> <div> <h2>type="text"</h2> <input type="text" name="태그식별용이름(중복가능),서버에 전송하는 데이터를 식별하기 위한 변수명" id="태그식별ID(유일해야함)" placeholder="입력힌트제공" value="123456789066" size="40" maxlength="10" minlength="2" required readonly> <!-- readonly : 읽기전용(입력불가, 서버에 전송은 됨) --> <!-- required : 필수 입력값이라는 뜻 --> </div> <!--maxlength : 사용자 입력 최대길이. 10자 초과 입력 불가--> <!--minlength : 사용자 입력 최소길이. 1자 입력은 되나 전송불가--> <!--value 초기값은 글자제한 무시--> <div> <h2>type="password"</h2> <input type="password" name="태그식별용이름(중복가능),서버에 전송하는 데이터를 식별하기 위한 변수명" id="태그식별ID(유일해야함)" placeholder="입력힌트제공" value="초기입력값" size="10" maxlength="10" minlength="2" required disabled> <!-- disabled : 비활성화(입력뿐만 아니라 서버로 전송도 안 됨) --> </div> <div> <h2>type="hidden"</h2> <input type="hidden" name="태그식별용이름(중복가능),서버에 전송하는 데이터를 식별하기 위한 변수명" id="태그식별ID(유일해야함)" placeholder="입력힌트제공" value="초기입력값" size="10" maxlength="10" minlength="2" required disabled> </div> <div> <h2>type="number"</h2> <input type="number" name="num1" id="id_num1" placeholder="힌트:숫자입력" value="3" max="10" min="0" step=".2"><!--size, max/minlength : 숫자타입 사용 X --> </div> <!--step : 증가량--> <div><!-- 항목당 여러개의 버튼이 그룹으로 묶이기 때문에 name 같아야 함 --> <h2>type="checkbox"</h2> <!-- 다중선택 --> <input type="checkbox" id="id_check1" name="chk1" value="c1"><label for="id_check1">선택1-1</label> <input type="checkbox" id="id_check2" name="chk1" value="c2" checked><label for="id_check2">선택1-2</label> <input type="checkbox" id="id_check3" name="chk1" value="c3"><label for="id_check3">선택1-3</label> <br> <!-- label의 for에 id 값 넣으면 라벨을 눌러도 체크표시가 가능해짐 --> <input type="checkbox" id="id_check4" name="chk2" value="c4"><label for="">선택2-1</label> <input type="checkbox" id="id_check5" name="chk2" value="c5"><label for="">선택2-2</label> <input type="checkbox" id="id_check6" name="chk2" value="c6"><label for="">선택2-3</label> </div> <div><!-- 항목당 여러개의 버튼이 그룹으로 묶이기 때문에 name 같아야 함 --> <h2>type="radio"</h2> <!-- 단일선택(그룹당 하나) checked 2개 써도 하나만 적용 됨 --> <input type="radio" id="id_radio1" name="rdo1" value="r1"><label for="id_radio1">선택1-1</label> <input type="radio" id="id_radio2" name="rdo1" value="r2"><label for="id_radio2">선택1-2</label> <input type="radio" id="id_radio3" name="rdo1" value="r3" checked><label for="id_radio3">선택1-3</label> <br> <input type="radio" id="id_radio4" name="rdo2" value="r4"><label for="id_radio4">선택2-1</label> <input type="radio" id="id_radio5" name="rdo2" value="r5"><label for="id_radio5">선택2-2</label> <input type="radio" id="id_radio6" name="rdo2" value="r6"><label for="id_radio6">선택2-3</label> </div> <div> <h2>type="file</h2> <!-- capture 속성은 안드로이드, ios 앱에서만 동작--> <input type="file" name="f1" id="id_file1" accept="image/*" capture multiple> </div> <div> <h2>type="image"</h2> <input type="image" src="\static\img\googlelogo.png" alt="구글로고" width="100"> </div> <div> <h2>type="button", type="submit, type="reset"</h2> <input type="button" value="버튼"> <input type="submit" value="전송"> <input type="reset" value="초기화"> </div> <div> <!-- f12 키 눌러서 개발자모드 콘솔에서 포맷형식 확인해서 쓰기 [1015.19:50]--> <h2>type="date", type="datetime-local", type="time", type="month", type="week",</h2> <!-- 브라우저에 따라 모양이 다름 --> <input type="date" value="2021-10-15" min="2021-01-01" max="2021-12-31" step="1"> <input type="datetime-local" value="2021-10-15T19:50:30"> <input type="time" value="19:50:30"> <input type="month" value="2021-10"> <input type="week" value="2021-W42"> </div> <div> <h2>type="range"</h2> <input type="range" min="0" max="100" step="5" oninput="res.value = this.value;"> <input type="range" min="0" max="50" step="10" list="id_datalist1" id="id_range2" oninput="res.value = this.value;"> <input type="text" id="res"> <datalist id="id_datalist1"> <option value="0"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50"></option> </datalist> </div> <div> <h2>type="search", type="url", type="email"</h2> <input type="search"> <input type="url" pattern="https://.*"> <!-- .* : 임의패턴 --> <input type="email" pattern=".*@.*(com|co.kr|net)"> <input type="tel" pattern="010-[0-9]{4}-[0-9]{4}"> </div> <div> <h2>type="color"</h2> <input type="color" oninput="res2.value = this.value; res2.style='color:'+this.value"> <input type="text" id="res2" readonly> </div> <div> <h2>datalist 태그</h2> <input type="text" list="id_datalist2"> <datalist id="id_datalist2"> <option value="추천 값1"></option> <option value="추천 값2"></option> <option value="추천 값3"></option> </datalist> <br> <input type="color" list="id_datalist3"> <datalist id="id_datalist3"> <option>#ff0000</option> <option>#00ff00</option> <option>#0000ff</option> </datalist> <br> <input type="number" list="id_datalist4"> <datalist id="id_datalist4"> <option value="0"></option> <option value="-1"></option> <option value="1"></option> </datalist> </div> <div> <h2>progress 태그</h2> <!-- 다운로드 진행 --> <progress value="50" max="100" id="id_progress"></progress> <input type="range" oninput="id_progress.value = this.value;"> </div> <div> <h2>meter 태그</h2> <meter value="50" min="0" low="25" high="75" max="100" optimum="10" id="id_meter"></meter> <input type="range" oninput="id_meter.value = this.value; id_mv.value = this.value"> <input type="text" id="id_mv"> <br> <meter value="50" min="0" low="25" high="75" max="100" optimum="90" id="id_meter2"></meter> <input type="range" oninput="id_meter2.value = this.value; id_mv2.value = this.value"> <input type="text" id="id_mv2"> </div> <div> <select> <option value="전송값1">출력값1</option> <option value="전송값2">출력값2</option> <option value="전송값3">출력값3</option> <option value="전송값4">출력값4</option> </select> <select size="2"> <option value="전송값1">출력값1</option> <option value="전송값2">출력값2</option> <option value="전송값3" selected>출력값3</option> <!-- selected 초기값 선택--> <option value="전송값4">출력값4</option> </select> <select size="3" multiple> <!-- multiple : 다중선택 가능, ctrl 누르고 선택--> <option value="전송값1">출력값1</option> <option value="전송값2">출력값2</option> <option value="전송값3">출력값3</option> <option value="전송값4">출력값4</option> </select> <select> <optgroup label="그룹1"> <option value="전송값1">출력값1</option> <option value="전송값2" selected>출력값2</option> </optgroup> <optgroup label="그룹2"> <option value="전송값3">출력값3</option> <option value="전송값4">출력값4</option> </optgroup> </select> </div> <div> <h2>textarea 태그</h2> <!-- 한 줄에 60자, 5행 보이게(제한글자X) maxlength : 제한글자 --> <textarea name="" id="" cols="60" rows="5" style="resize:none" maxlength="50" placeholder="댓글작성..." oninput="id_textarea.value = this.value.length + '/50'"></textarea> <input type="text" id="id_textarea"> </div> <div> <button type="submit">전송</button> </div> </form> </body> </html> |
cf. 태그 보는 법 : 페이지에서 F12 [1015.21:50]