Form 태그
<form> (block속성)
-
여러 입력 양식을 하나로 묶어주는 태그. 예를들어 로그인이나 회원가입
배송지 입력과 같은 다양한 입력양식들을 묶어서 서버로 보내는 태그이다. -
form태그에는 서버에 내용을 보내기 위해 다양한 속성들을 함께 사용한다.
[속성](=필수)
name: 폼 양식의 이름을 지정한다. 한 문서안에 여러개의 form태그가 있을 경우
폼들을 구분하기 위해 사용한다. class이름 짓듯이 지으면된다.
action: 입력데이터들의 전달 위치를 지정한다. 보통 서버주소가 들어가고, 만 서버가 준비되지 않았다면 #(임시경로)를 넣는다.
method: 입력 데이터를 전달하는 방식.
get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시되고,
256~4096byte까지의 데이터만 서버로 전송할 수 있다.
보안에 취약하고 서버에 전송속도가 굉장이 빠르다.
보통 광고성 수신문자같은 내용을 보낼때 사용한다.
post★ : 대부분의 방식에 사용되며 사용자의 입력을 표준입력으로 전송하여
입력 내용 길이에 제한받지 않고 사용자가 입력한 내용을 주소표시줄에 노출하지 않는다.[기본형]
<form name="폼이름" action="서버주소" method="post" id="아이디값"> 입력양식들 </form><lable>(inline속성) -
폼 요소에 레이블(이름표)을 붙일때 사용하는 태그이다. input태그끼리 서로 구분하는 용도로 사용된다.
-
for속성은 해당 폼요소를 서버로 넘길때 어떤 input과 세트인지 알려주는 역할을 한다. 또한 브라우저에서 세트인 input을 구별할때도 사용한다. 이때 for에 붙인 이름과 input에 있는 name속성값이 동일해야한다.
[기본형]
1.<lable for="폼요소 이름">
레이블 텍스트(폼요소 이름)
<input type="값" name="폼요소 이름" />
</label>
2.<lable for="값">레이블 텍스트(폼요소 이름)</label>
<input type="값" name="폼요소 이름"/>
<fieldset>,<legend>
- form 양식을 만들때 각 요소들을 그룹으로 묶어주는
<fieldset>태그와
해당 영역의 이름을 붙여주는<legend>태그가 있다.[기본형]
<fieldset> <legend>사용자 정보</legend> </fieldset>
input 태그
<input />
-
input태그는 사용자의 정보를 입력받기 위해 사용하는 태그로
type속성값에 의해 모양과 기능이 결정된다. -
input태그는 inline속성을 가지며, 박스형태의 type들은
inline-block속성을 가진다.[기본형]
<input type="기능" name="폼요소의 이름(label과 연결)" id="아이디명"/>
input의 type속성값
1. type="hidden"
: 화면의 폼에서는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할때
함께 전송되는 요소이다. 사용자가 알 필요는 없지만 관리자가 알아야하는
내용이 있을 경우 사용한다.
2. type="text"★
: 가로로 짧은 글을 입력할때 사용하는 입력창, 아이디, 이름, 주소와 같은
내용을 입력받을때 사용한다. '텍스트 필드'라고도 한다.
3. type="password"
: 텍스트필드와 모양은 같지만 사용자가 입력하면 특수문자로 나타난다.
단, 패스워드 필드가 비밀번호 양식이 맞는지 확인해주지 않는다.
단순히 글자를 특수기호로 바꾸는 역할만 한다.
4. type="search"
: 검색 필드를 만들때 사용한다. 예전에는 텍스트필드를 사용했지만 html5에서
필드딜이 세분화되면서 검색어를 입력할때 search를 사용할 수 있게 되었다.
검색 키워드를 입력하면 키우드를 지울 수 있도록 x아이콘이 함께 표시된다.
5. type="url"
: 사용자로부터 웹 주소를 입력받을때 사용한다.
6. type="email"
: 메일 주소를 입력할 경우 email필드를 사용하면 실제 폼 양식이
동작했을 때 이메일 양식에 맞게 작성되었는지 브라우저 자체에서
체크한다.
7. type="tel"
: 사용자가 입력한 정보를 일반 텍스트가 아닌 전화번호로 인식하며
바로 전화번호를 입력할 수 있도록 숫자 키패드를 보여준다.
pc화면에서는 일반 텍스트 필드 형태로 보이지만 모바일 환경에서는
숫자 키패드로 자동 전환되며 전화를 걸 수 있도록 해준다.
8. type="number" min="최솟값" max='최댓값' step='증감값' value='초기값'
: 숫자 생성 양식을 만들때 사용한다. min은 최솟값을 말하고 max는
최댓값을 말한다. step은 증가하거나 감소하는 값으로 여기에 쓰인
숫자만큼 증가하거나 감소한다.
9. type="range" min="최솟값" max='최댓값' step='증감값' value='초기값'
: 슬라이드 막대를 움직여
10. type='radio' name='폼요소이름'(=필수)
: 라디오버튼은 짧은 항목에 대한 선택이 필요할 때 주로 활용되며
반드시 한 가지 항목만 선택해야 할 때 사용한다.
라디오 필드에서는 name값이 같아야만 같은 그룹으로 인식하여
한가지만 선택하게 만들 수 있다. checked속성을 사용하면 방문자의
편의를 위해 미리 항목에 체크된 상태를 보여줄 수 있다.
11. type='checkbox' checked
: 체크박스는 여러 항목을 다중선택할때 주로 사용한다.
라디오 버튼과 마찬가지로 checked속성을 이용하여 방문자의 편의를
높일 수 있다.
12. type="color"
: 색상 선택 양식을 만든다. 선택 시 색상 선태 화면이 나타나고
색상을 선택할 수 있다.
13. type="date" type="month" type="week"
: 생년월일과 같이 년/월/일에 대한 정보를 달력을 통해 선택할 수 있다.
month는 월과 연도를 선택할 수 있고, week은 연도와 주를 선택할 수 있다.
14. type="time" type="datetime" type="datetime-local"
: 시간을 지정할때 사용하는 type이다. 시간만 지정할 경우에는 time을 사용하고
날짜와 시간을 함께 지정할 경우 datetime, datetime-local을 사용한다.
15. type="submit" type="reset"
: 사용자가 입력폼에 입력한 내용을 서버로 전송할때 type="submit"을 이용할 수 있다.
입력 내용을 초기화할때는 type="reset"을 이용한다. 둘 다 버튼형태로 출력된다.
버튼 이름을 바꾸고 싶을때에는 value속성을 이용한다.
16. type="file" accept="파일형식1,파일형식2..." multiple
: 사용자가 가지고 있는 특징 이미지나 파일들을 첨부할때 사용한다.
만약 사용자가 첨부할 파일의 확장자를 제한하고 싶다면 accept
속성으로 파일을 제한 할 수있다.
