입력양식 관련 태그
input 태그
•
사용자에게 값을 입력받을 수 있는 텍스트상자 또는 체크박스 등등을 만들 수 있음
•
<button> 태그 : 누를 수 있는 버튼을 만들어 줌
•
<input type="submit" value="원하는문구출력">
button과 같은 버튼을 만들지만 제출되는 속성을 가짐
•
<label for id=""> 라벨 속성을 부여할 수 있다.
해당 id값을 가진 글자를 누르면 해당 input 텍스트상자의 커서가 깜빡인다.
•
required 속성을 부여하면 해당 텍스트박스에 내용을 기재하지 않으면 넘어가지 않는다.
•
placeholder=""를 이용하면 사용자에게 회색문구를 보여줄 수 있다.
아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>
성별 : <input type="radio">남 <input type="radio">여
<br>
<button>회원가입</button>
<input type="submit" value="회원가입">
HTML
복사
폼 관련 태그
•
form 태그 내의 submit 버튼 클릭시 해당 form 내에 작성된 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할 수행
◦
form action="" method=""
▪
action 속성 : 해당 form 내에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로 제시
▪
method 속성 : 요청 전송 방식을 지정하는 속성 (get(기본값)/post)
> get방식 : 요청시 사용자가 입력한 값들이 url에 노출되는 방식
> post방식 : 요청시 사용자가 입력한 값들이 url에 노출되지 않는 방식
•
form 태그 내의 제출(submit)버튼 클릭시 action에 지정한 서버로 method에 작성한 요청전송방식으로 사용자가 입력한 값들을 key=value 세트로 전달
•
fieldset : 그룹을 묶는 태그 (기본적으로 테두리존재)
•
legend : 해당 그룹의 제목을 붙이는 태그
text와 관련된 input태그의 타입
type="text"
•
한줄짜리 텍스트를 입력할 수 있는 텍스트 상자 (기본값)
type="password"
•
비밀번호를 입력할 수 있는 텍스트 상자(입력내용이 *로 표시)
type="search | url | email"
•
겉모습은 일반 텍스트상자와 유사하지만 각각의 정보에 맞게 세분화된 기능 제공
textarea 태그
•
텍스트 상자이나 여러줄을 입력할 수 있음
•
style="resize:none"를 쓰지 않으면 사용자 마음대로 크기조절가능
숫자와 관련된 input태그의 타입
type="number"
•
숫자값만 작성가능한 텍스트 상자
•
스핀박스가 표시됨 (스핀박스 : 위/아래 화살표 버튼)
•
step="숫자"로 양을 조절할 수 있고 value=""로 기본값 지정 가능
type="range"
•
슬라이드바를 통해 숫자 지정 가능
날짜 및 시간과 관련된 input태그의 타입
type="date|month|week|time|datetime-local"
•
date : input type="date" name="dateIn"
◦
연도, 월, 일 입력받을 수 있는 텍스트 상자
•
month : <input type="month" name="monthIn">
◦
연도, 월까지만 입력받을 수 있는 텍스트 상자
•
week : <input type="week" name="weekIn">
◦
연도, 해당 년도에 몇번째 주인지 입력받을 수 있는 텍스트 상자
•
time : <input type="time">
◦
오전|오후, 시, 분 입력받을 수 있는 텍스트 상자
•
datetime-local : <input type="datetime-local" name="dtIn">
◦
연도, 월, 일, 오전|오후, 시, 분 입력받을 수 있는 텍스트 상자
라디오버튼과 체크박스 관련 input 태그의 타입
라디오 버튼 (type="radio")
•
제시한 여러개의 값들 중에서 오로지 한 개만 선택해야될 때
(name 속성값이 똑같은 것들끼리 하나의 그룹으로 지어짐)
•
제출시 현재 선택된(checked) 값이 넘어감
단, 선택했을 때의 값을 어떤 값으로 넘길 것인지 value값 명시해둬야됨!
<input type="radio" id="radioX" name="gender" value="X" checked> <label for="radioX">선택안함</label>
<input type="radio" id="radioM" name="gender" value="M"> <label for="radioM">남자</label>
<input type="radio" id="radioF" name="gender" value="F"> <label for="radioF">여자</label>
HTML
복사
체크박스 (type="checkbox")
•
제시한 여러개의 값들 중에서 여러개 선택가능할 경우
•
현재 선택된(checked) 값들이 넘어감
•
넘기고자 하는 value값 명시해둬야됨
취미 :
<input type="checkbox" id="baseball" name="hobby" value="baseball">
<label for="baseball">야구</label>
<input type="checkbox" id="basketball" name="hobby" value="basketball">
<label for="basketball">농구</label>
<input type="checkbox" id="soccer" name="hobby" value="soccer">
<label for="soccer">축구</label>
HTML
복사
추가적인 input태그의 타입
type="color"
•
색상을 선택할 수 있는 input
•
색상선택 : <input type="color" name="color">
type="file"
•
첨부하고자 하는 파일을 선택할 수 있는 input
첨부파일 : <input type="file" name="uploadfile">
<br>
<h3>type="hidden"</h3>
<p>- 특정값을 사용자에게 입력받지 않고 화면에 노출시키지도 않고 근데 넘기고자 하는 값이 있을 경우</p> <br><br>
안보임 : <input type="hidden" name="hiddenValue" value="ㅋㅋㅋ">
<br>
<br><br>
<h3>type="submit|reset|button"</h3>
<input type="submit"> <!--value="제출"-->
<input type="reset"> <!--value="초기화"-->
<input type="button" value="일반버튼">
<br><br>
<h3>button [type="submit|reset|button"]</h3>
<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button">일반버튼</button>
<button>type속성생략시 제출</button>
<!--
button태그에 type 속성생략시 submit임!!
그래서 form태그내에서 button작성시 무조건 type속성 명시하자!!
-->
