HTML5 웹프로그래밍입문 6 장. 다양한입력폼 1
목차 6.1 폼이해하기 6.2 기본형식으로입력하기 6.3 고급형식으로입력하기 2
6.1 폼이해하기 3
<form> 요소의사용 폼요소의사용 회원가입, 상품구매, 키워드검색등사용자로부터정보를받을때 사용자와애플리케이션이상호작용 사용자입력 전송버튼 애플리케이션에전달 실행결과반환 <form> 요소의역할 사용자가입력하는정보를하나로묶어서애플리케이션에전달 다양한입력양식을그룹핑하고전송방법을설정 <form> 요소내사용자의정보입력양식 <input>, <textarea>, <select>, <button> 등의입력요소를이용 4
다양한입력폼예제 <h3> 다양한입력폼 </h3> <form method="get" action="form_app.js"> 성명 : <input type="text" name="person"/> <br> 성별 : <input type="radio" name="sex" value="male"/> 남성 <input type="radio" name="sex" value="female"/> 여성 <br> 직업 : <select name="job" size="1"> <option> 학생 </option> <option> 회사원 </option> <option> 공무원 </option> <option> 기타 </option> </select> <p> 구입희망분야 ( 복수선택가능 )<br> - 분야 : <input type="checkbox" name="books" value="computer"/> 컴퓨터 <input type="checkbox" name="books" value="economy"/> 경제 <input type="checkbox" name="books" value="common"/> 상식 <br> 비고 : <br> <textarea name="comments" rows="4" cols="40"/></textarea> </p> <hr> <input type="submit" value=" 신청 "/> <input type="reset" value=" 취소 "/> </form> 5
<form> 요소의주요속성 <form name= 이름 method= get/post action= 애플리케이션주소 > method 속성 : 데이터전송방식지정 Get방식 : 전송할데이터를 URL 주소뒤에포함, - 예, http:// ch04/app.js?person=%c8%ab%b1%e6&sex=male& jobs= - 간단한데이터에는편리, 그러나보안에취약 Post방식 : 프로그램의입출력방식을사용, 데이터의양에제한없다 action 속성 : 데이터처리할애플리케이션주소 ( 웹서버경우 URL) name속성 : 폼요소에대한이름 HTML 문서에서 <form> 의역할 다양한 <input> 요소에대해 데이터입력 전달 반환 GET/POST 방식 요청 ( 데이터전송 ) 응답 ( 실행결과 ) 웹서버애플리케이션 (ASP, JSP, PHP) 6
6.2 기본형식으로입력하기 6.2.1 텍스트입력 6.2.2 선택항목의입력 6.2.3 버튼입력 6.2.4 기타입력필드 6.2.5 입력필드의그룹핑 7
입력폼의형태 기본적인입력폼의형태 <form> 요소안에 <input>, <textarea>, <select>, <button> 등요소 <input> 요소의속성 <input type= 입력형식 name= 변수명, value= 입력값 /> name 속성, value 속성 type 속성은입력폼의유형 텍스트관련 : text, password 선택관련 : radio, checkbox 버튼 : submit, reset, button, image 기타 : file, hidden 8
텍스트입력 문자열입력필드 ( 한줄 ) <input type= text name= 변수명 value= 초기값 /> name 속성 : 애플리케이션에전달될변수명 value 속성 : 입력받은값을전달 ( 입력창초기문자 ) 암호입력필드 <input type= password name= 변수명 /> 보안이필요한문자입력, 으로표시 ( 더이상보호기능없음 ) 텍스트영역필드 ( 여러줄 ): <textarea> 요소 <textarea name= 이름 cols= 열의수 rows= 행의수 > 텍스트영역에표시되는초기문장 </textarea> 표시영역보다많은텍스트를입력하면스크롤바 9
아이디와비밀번호, 요청사항입력 <h3> 문자열, 암호입력및텍스트영역 </h3> <form method="post" action="form_app.js"> 아이디 : <input type="text" name ="id" value="...id 입력..."> <br> 비밀번호 : <input type="password" name="pwd"> <p> 요청사항 : <br> <textarea name="comment" cols="40" rows="5"> 전달하실내용을적으세요 : </textarea> </form> 10
선택항목의입력 라디오버튼 <input type= radio name= 변수명 value= 선택값 checked /> name 속성값이같은그룹에서 value 값을하나만선택하여전달 예, member=yes&sex=male 의형태로전달 회원여부 : <input type="radio" name="member" value="yes" checked/> 회원 <input type="radio" name="member" value="no"/> 비회원 <br> 성별 : <input type="radio" name="sex" value="male"/> 남성 <input type="radio" name="sex" value="female"/> 여성 체크박스선택 <input type= checkbox name= 변수명 value= 선택값 checked /> 체크박스에표시된모든 value 속성값들이애플리케이션으로전송 취미 ( 중복선택 ) : <input type="checkbox" name="hobby" value="read"/> 독서 <input type="checkbox" name="hobby" value="movie" checked/> 영화 <input type="checkbox" name="hobby" value="music"/> 음악 <input type="checkbox" name="hobby" value="sports"/> 스포츠 11
선택목록에서선택 : <select> 요소내에 <option> 항목 드롭다운형태 (size= 1), 혹은스크롤박스형태 (size > 1) multiple 속성 : 다중선택 각항목은 <select> 요소내에서 <option> 요소로정의 <select name="job" size="1" > <option value= student selected> 학생 </option> <option value= company > 회사원 </option> <option value= teacher > 교사 </option> <option value= sales > 자영업 </option> <option value= others > 기타 </option> </select> <select size= 4 multiple> 12
버튼입력 전송버튼 : 입력데이터전달 <input type= submit value= 버튼라벨 /> <form> 요소에있는모든입력데이터가 <form> 의 action 속성에서지정한애플리케이션프로그램으로전송 초기화버튼 <input type= reset value= 버튼라벨 /> 일반버튼 : 다양한용도로사용 <input type= button value= 버튼라벨 /> 이미지버튼 <input type= image src= 이미지파일 alt= 대체문자열 /> <button> 요소 : <button type= submit > 버튼라벨 </button> 13
<form method="get" action="form_app.js"> <p> 취미 ( 중복선택 ) : <input type="checkbox" name="hobby" value="read"/> 독서 <input type="checkbox" name="hobby" value="movie" checked/> 영화 </p> 직업 : <select name="job" size="4" multiple> <option value="student" selected> 학생 </option> <option value="company"> 회사원 </option> <option value="teacher"> 교사 </option> </select> <hr> <input type="submit" value=" 전송하기 "/> <input type="reset" value=" 초기화 "/> <input type="button" value=" 확인하기 " onclick="alert(' 입력값확인 ')"/> <input type="image" src="help.gif" alt=" 전송버튼 "/> </form> 14
기타입력필드 파일선택하기 : <input type= file /> 파일업로드하기 <br> <input type="file" name="myfile"/> 데이터숨김 <input type= hidden name= 변수명 value= 값 /> 시스템에서특정데이터를처리하고싶을때, 예 : 사용자 IP 주소 텍스트라벨 : 특정입력필드에연결 <label for= 입력아이디 > 데이터전달에는영향이없다 성별 : <label for="male"> 남성 </label> <input type="radio" name="sex" id="male" value="male"> <label for="female"> 여성 </label> <input type="radio" name="sex" id="female" value="female"> 15
입력필드의그룹핑 그룹핑 : <fieldset> 요소 폼양식을그룹핑하는범위를지정 사용자의시각적편의를위해서제공 입력필드의그룹주위에기본스타일로테두리선 name 속성 : 그룹의이름을지정하는 form 속성 : 폼과연결 disabled 속성 : 그룹내의모든하위입력요소들을비활성화 그룹의라벨 : <legend> 요소 그룹을구분하기위한그룹의제목라벨 <fieldset> 요소에포함되는첫번째자식요소로서한번만사용 그룹라벨의스타일은그룹을구분하는선의중간에걸쳐서표시 16
도서검색예제 <form method="post" action="form_app.js"> <fieldset> <legend> 로그인 </legend> <label for="user_id"> 아이디 : </label> <input type="text" name="id" size="20" id="user_id"> <br> <label for="user_pw"> 비밀번호 :</label> <input type="password" name="pw" size="20" id="user_pw"> </fieldset> <br> <fieldset> <legend> 통합검색 </legend> <label for="book_name"> 도서명 : </label> <input type="text" name="book_search" size="50" id="book_name"> <br> 검색범위 : <input type="radio" name="s_type" value="keyword" id="keyword"> <label for="keyword"> 키워드 </label> <br> 자료유형 : <input type="checkbox" name="d_type" value="all"> 전체 </fieldset> <br> <button type="submit"> 검색 </button> <button type="reset"> 지우기 </button> </form> 17
6.3 고급형식으로입력하기 6.3.1 서식이있는텍스트입력 6.3.2 날짜와시간입력 6.3.3 색상및숫자입력 6.3.4 데이터목록에서선택 18
<input> 요소에추가된입력형식 text, password, radio, checkbox, button 외에새로운양식 텍스트관련 : email, URL, tel, search ( 검색창 ) 날짜와시간 : date, month, week, time, datetime, datetime-local 색상및숫자 : number, range, color <input> 요소에새로운속성 Autocomplete, placeholder, required, autofocus, step 속성 <input> 요소이외에추가된입력요소 <output> 요소, <datalist> 요소, <keygen> 요소 유효성검사 예, 이메일입력필드, 필수적으로입력해야하는필드 검사대상 : <input>, <select>, <textarea>, <button> 에서 submit 일때 required 속성, novalidate 속성 19
서식이있는텍스트입력 이메일주소입력 : <input type= email /> 이메일주소의형식이 ****@***.*** 에맞게작성되었는지확인 multiple 속성 : 여러개의이메일주소, 콤마로구분 URL 주소입력 : <input type= url /> 인터넷주소표기에맞는 http:// 형식으로입력되었는지확인 value 속성에 http:// 를지정하여미리표시 20
전화번호입력 : <input type= tel /> pattern 속성 : 원하는전화번호와자리수에유효한패턴을지정 정규표현식으로정의, 자바스크립트에서사용하는패턴과동일 pattern= [A-Za-z]{no}, pattern= [0-9]{no}, pattern= [0-9]+, pattern= [A-Za-z0-9]{min, max} placeholder 속성 : 입력할자리수표시 ( 단순히표시만 ) Tel : <input type="tel" placeholder="00*-000*-0000" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" /> 검색창입력 : <input type= search /> 21
날짜와시간입력 날짜입력 ( 일, 월, 주 ) <input type= date /> 연-월-일 <input type= month /> 연-월 <input type= week /> 연-주 ( 번호순서 1월첫주가 W01 ) min 속성, max 속성, value 속성 속성값은 연-월-일 형식으로날짜입력 (a) type= date (b) type= month (c) type= week 22
시간입력 <input type= time /> : 위 / 아래 ( ) 버튼으로시간조정 <input type= datetime /> UTC 국제표준시간대 <input type= datetime-local /> 현지시간 time, datetime, datetime-local 형식의예 23
날짜와시간입력예제 <form method="get" action="form_app.js"> 성명 : <input type="text" name="p_name"/> <br> 전화 : <input type="tel" name="p_tel" placeholder="00*-000*-0000" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" /> <br> 이메일 : <input type="email" name="p_mail" placeholder="***@***.***"/> <p> 도서명 : <input type="text" size="25" name="book_title"/><br> 예약희망일 : <input type="date" name="last_date" min="2013-01-30"><br> 수령시간 : <input type="time" name="time_from" min="09:00" max="18:00"> 에서 <input type="time" name="time_until" min="09:00" max="18:00"> 사이 <br> <hr> <input type="submit" value=" 예약하기 "/> </form> 초기상태 입력오류 24
색상및숫자입력 색상입력 : <input type= color /> 사용자가직접색상을선택 숫자입력 : <input type= number /> 화살표 min 속성, max 속성, value 속성, step 속성예, <input type="number" min="0" max="100" step="10" value="20"/> 범위입력 : <input type= range /> 스크롤바 min 속성, max 속성, step 속성예, 0.1mm <input type="range" min="1" max="5" value="3" /> 0.5mm 25
데이터목록에서선택 데이터목록기능 : <datalist> 요소 <input> 요소의 list 속성에 <datalist> 요소의 id 속성을지정 검색어자동완성혹은제시어기능구현가능 입력창에포커스가들어오면옵션목록이등장 참가국 : <input type="text" size="12" list="country" /> <datalist id="country"> <option value=" 스페인 "/> <option value=" 영국 "/> <option value=" 독일 "/> </datalist> 26
도서구입요청예제 <form> <h3> 도서구입요청 </h3> 도서명 : <input type="text" list="book" /> <datalist id="book"> <option value=" 멀티미디어배움터 " label="30,000"/> <option value=" 인터넷배움터 " label="34,000"/> <option value=" 컴퓨터와 IT 기술의이해 " label="28,000"/> </datalist> <p> 선호도 : 1 <input type="range" min="1" max="5" value="3" /> 5 <p> 가격 : <input type="number" name="price" min="0" step="100" value="10000"/> 원 <p> 권수 : <input type="number" name="num" min="0" step="1" value="0" /> 권 <p><input type="submit" value=" 구입 "/> </form> 27