폼 만들기
폼이란 비밀번호 입력창이나 체크박스 라디오박스등 웹에서 많이보이는 입력란등입니다.
태그의 종류
<form> :폼을 만들고 그안에 폼관련 태그를 넣습니다.
form태그의 속성
method :사용자입력값을 서버에 어떻게 넘겨줄지 정하는데 get은 사용자입력값이 드러나고 post는 드러나지않으며 입력수 제한이 없습니다.
name :폼의 구분을 위해 쓰입니다.
action :서버에서 폼의 내용을 처리할 프로그램을 지정합니다.
target :action태그에서 지정한 스크립트 파일을 어떤 창에서 실행할지 정합니다.
<input> :사용자 입력 값을 받을 폼을 만드는 태그입니다.
input태그의 속성
autocomplete :아이디 비밀번호를 입력할 때처럼 자동입력 기능을 on off할 수 있습니다.
type :사용자 입력 값을 받을 방식을 정합니다.(텍스트, 체크박스등등)
id :레이블태그의 for의 이름과 연결되어 다른 태그와 연결되어 쓰일 수 있게 만듭니다.(체크박스와 라디오버튼에 이용됩니다.)
size :필드 크기 값을 지정합니다.
checked :미리정해진 기본값을 표시해줍니다.(예 :체크박스 1번이 기본값인경우)
<label> :for속성으로 input태그를 연결해 줍니다.(라디오버튼 같은 경우 하나만 선택할 수 있게 해줍니다.)
fieldset과 legend태그
legend태그는 사용자에게 보여지는 창에서 '로그인'같은 이름으로 폼을 묶어줍니다.
fieldset태그는 묶어진 폼들에서 외곽선을 표시해줍니다.
예제↓
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 32 33 34 35 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <form method="post" name="practice" target="_blank"> <fieldset> <legend>로그인</legend> <label for="로그인"><!--label태그의 사용1--> <input type="text" value="아이디를 입력해주세요." title="아이디" id="practice" autocomplete="on"> <br> <input type="password" title="비밀번호" id="practice" autocomplete="on"> <br> <input type="submit" title="로그인" id="practice" value="확인"> </label> </fieldset> <br><!--라벨태그의 사용2--> <label for="search_id">아이디 검색</label> <input id="search_id" type="text"\ value="ex)xxxxxx@!!!!!.com"> <input id="search_id" type="submit" value="찾기"> </form> <dl> <dt>복수 선택가능</dt><!--텍스트 누르면 선택안됨...--> <dt><input type="checkbox" name="pr" value="a">a</dt> <dt><input type="checkbox" name="pr" value="b">b</dt> </dl> <dl> <dt>한개만 선택가능</dt><!--택스트 누르면 선택됨--> <dt><label><input type="radio" name="pr2" checked value="a">a</label></dt> <dt><label><input type="radio" name="pr2" value="b">b</label></dt> </dl> </body> </html> | cs |
결과↓
여기까지 포스팅을 마치도록 하겠습니다.