-
[HTML] HTML의 모든 것 - (5) FormSTUDY/HTML.CSS.JS 2021. 3. 5. 15:39
Form은 HTML에서 사용자의 입력을 처리할때 사용된다. 입력들은 처리를 위해 대부분 서버로 전송된다!
<form> Element
<form> 태그는 HTML 에서 사용자의 입력을 위한 양식을 만들때 사용한다.
<form> 태그는 텍스트, 체크박스, 라디오 버튼, 제출 버튼 등 다양한 입력 태그들을 내부에 포함한다.
1. <input>
HTML에서 input 태그는 가장 많이 사용되는 form이다. input 태그는 속성에 따라 다양한 방식으로 표현될 수 있다.
<input type="text"> Displays a single-line text input field <input type="radio"> Displays a radio button (for selecting one of many choices) <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) <input type="submit"> Displays a submit button (for submitting the form) <input type="button"> Displays a clickable button ▷ input의 type들
① text : 텍스트 입력을 위한 한 줄의 입력 field
<form> <label for="fname">First Name:</label><br/> <input type="text" id="fname" name="fname"><br /> </form>② radio : 한개만 선택 가능
<form> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br /> <input type="radio" id="male" name="gender" value="male"> <label for="male">male</label><br /> </form>③ checkbox : 여러개 선택 가능
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="bike"> <lable for="vehicle1"> bike </label><br /> <input type="checkbox" id="vehicle2" name="vehicle2" value="car"> <lable for="vehicle2"> car </label><br /> <input type="checkbox" id="vehicle3" name="vehicle3" value="boat"> <lable for="vehicle3"> boat </label><br /> </form>④ submit : 전송 버튼
form 데이터의 내용을 form handler로 전송하는 버튼이다. form handler는 주로 서버에 있는 입력 데이터 처리
파일이다. form handler는 ' action'속성으로 정확하게 지정된다.
<form action="/action_page.php"> <lable for="fname">First Name : </label> <input type="text" id="fname" name="fname" value="John"><br /> <input type="submit" value="Submit"> </form>⑤ 이외에도 input의 다양한 타입들이 존재한다. 이곳을 확인!
※ <input>의 name 속성
input 필드는 제출을 위해선 반드시 name 속성을 가져야한다.
만약 name 속성이 생략된다면, input 필드의 값은 아예 전송되지 않을 것!!
2. <label> : form element의 라벨을 정의하는 태그
<label> 태그는 스크린 리더를 사용하는 사용자들에게 유용하다. 스크린 리더가 화면의 input 요소를 만나면, 이 label을 강조해 읽어주기 때문이다. 뿐만 아니라, 라디오 버튼이나 체크박스 같은 작은 부분을 클릭하기 어려워하는 사용자들에게도 도움이된다. 라벨의 글씨를 클릭하면, 라디오 버튼이나 체크박스가 흔들리며 위치를 알려주기 때문.
<label>태그의 for 속성은 반드시 input 태그의 id와 동일하게 써야한다. 그래야 라벨과 input form이 하나의 그룹으로 묶이기 때문이다.
3. <select> : 드랍 다운 리스트
option 태그에서 default로 첫번째 항목이 선택된다. default로 선택되는 항목을 지정하고 싶다면,
<option value="value" selected> 로 지정해줄 수 있다. 이외에도 size와 multiple 속성들을 사용할 수 있다.
<form> <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volov</option> <option value="volvo">Volov</option> <option value="volvo">Volov</option> </select> </form>4. <textarea> : 한 줄이 아닌 여러줄의 텍스트를 입력할 수 있다.
rows는 텍스트 영역에 보여지는 줄의 개수를 지정한다.
cols는 텍스트 영역의 보여지는 너비를 지정한다.
CSS를 사용해서 사이즈를 조절할 수도 있다.
<form> <textarea name="message" rows="10" cols="30"> The Message... </textarea> </form>5. <button> : 클릭 가능한 버튼을 정의한다.
<button> 태그에서 항상 type 속성을 지정해야한다. 각각의 브라우저는 button 태그의 default 속성으로 각각 다른 속성을 사용할 수 있기 때문이다.
<button type="button" onclick="alert('Hello World!')"> Click me! </button>6. <fieldset> & <legend> : fieldset은 관련된 form들을 그룹으로 묶어준다. legend는 fieldset의 이름을 지정한다.
<form> <fieldset> <legend>Personalia</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <input type="submit" value="Submit"> </fieldset> </form>
<fieldset> & <legend> 7. <datalist> : 미리 정해진 옵션들의 리스트 중 하나를 골라 input에 적용할때 사용한다.
input 태그의 list 속성을 사용하고, list 속성의 값과 datalist의 id는 동일해야한다.
동작 확인은 이곳에서
<form> <input list="browser"> <datalist id="browser"> <option value="IE"> <option value="Safari"> </datalist> </form>8. <output> : 계산 결과를 보여줄 때
동작 확인은 이곳에서
9. 이외의 element들은 이곳을 참고
Form Attirbute
1. Action Attribute
action 속성은 form이 제출될때의 동작을 정의하는 속성이다.
주로 form의 데이터는 제출버튼을 누르면, 이 데이터를 처리할 파일이 있는 서버로 제출된다.
action 속성이 생략되면, action이 현재 페이지로 설정된다.
아래와 같은 form을 제출하게 되면, 'action_page.php'로 form의 데이터가 보내진다. 이때 데이터는,
fname=John&Iname=Doe 이렇게 전달된다. 그렇기 때문에 submit을 위해선 반드시 name 속성을 포함해야 한다!
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>2. Target Attribute
target 속성은 form을 제출한 이후에 동작을 보여줄 위치를 지정하는 속성이다.
_blank The response is displayed in a new window or tab _self The response is displayed in the current window _parent The response is displayed in the parent frame _top The response is displayed in the full body of the window framename The response is displayed in a named iframe <form action="/action_page.php" target="_blank">3. Method Attribute
method 속성은 데이터를 제출할때 사용할 HTTP 모드를 설정하는 속성이다.
GET, POST 두가지가 존재하는데,
GET : URL에 변수들을 포함해서 보내는 방식. URL에 name/value 쌍으로 데이터를 포함해 전송한다.
Default 방식
URL에 데이터가 모두 노출되기 때문에 중요한 정보(비밀번호 등)는 GET 방식으로 보내지 않는것이 좋음.
URL 길이에 제한이 있음. (2048자)
결과를 북마크하려는 경우에 유용
보안이 크게 중요하지 않은 경우에 유리하다. (e.g 구글 검색)
POST : HTTP 요청 본문에 보내고자 하는 데이터를 포함 (URL 상에 보내려는 데이터는 보여지지 않음)
크기에 제한이 없어 대량의 데이터 전송에 유리
보안에 유리
<form action="/action_page.php" method="get">
GET <form action="/action_page.php" method="POST">
POST 4. Autocomplete Attribute
자동완성 기능. autocomplete을 사용하면 사용자가 이전에 입력했던 내용을 바탕으로 자동완성을 해준다.
5. Novalidate Attribute
유효성 검사를 하지 않도록 지정하는 속성. (boolean)
<form action="/action_page.php" novalidate>
Input Attributes
1. value : input 필드에 표시되는 초기값
<input type="text" id="fname" name="fname" value="John"><br>
value 속성 2. readonly : 읽기전용(수정 불가), 탭으로 이동과 텍스트 복사는 가능. form을 제출할때, 읽기 전용인 필드도 함께 제출된다.
<input type="text" id="fname" name="fname" value="John" readonly><br>
readonly 3. disabled : 비활성화. 클릭과 사용불가. form 제출시 disable 필드는 제출되지 않는다.
disabled 4. size : input 필드의 너비를 조절
default size는 20이고, text, search, tel, url, email, password 타입에 사용가능하다.
5. maxlength : input 필드에 입력할 수 있는 최대 글자 수를 지정
maxlenght 이상의 글자를 입력할 수 있지만, 아무런 피드백을 제공하지는 않는다. 피드백 제공을 위해선 js를 이용해야한다.
6. min & max : input 필드의 최소값과 최대값을 지정
숫자, 범위, 날짜, datetime-local, 월, 시간, 주 타입에 사용가능하다.
<label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5">7. multiple : 한개 이상의 값을 입력할 수 있다.
이메일과 파일 타입을 이용시 사용 가능하다.
<form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form>8. pattern : 입력된 값이 정규식에 맞게 입력되었는지 검증
텍스트, 날짜, 검색, url, 전화번호, 이메일, 비밀번호 타입 이용시 사용가능하다.
title 속성은 사용자들에게 어떤 형식으로 작성해야하는지 힌트를 제공한다.
<form> <label for="country_code">Country code:</label> <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> </form>9. placeholder : input 필드에 적절한 형식을 보여줌. input 필드에 값을 입력하기 전까지 보여진다.
<form> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>10. required : 필수로 작성해야하는 필드. 작성되지 않으면 form이 제출되지 않음.
텍스트, 검색, url, 전화번호, 이메일, 패스워드, date picker, 숫자, 체크박스, 라디오, 파일에 사용가능
<form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form>11. step : 입력 필드의 유효한 숫자 간격을 지정
숫자, 범위, 날짜, 날짜 / 지역, 월, 시간 및 주에 사용 가능
<form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> </form>12. autofocus : 페이지가 로드될때, 입력 필드에 초점이 향하도록 함
13. height & width : input의 타입으로 image를 사용하는 경우, 항상 height와 length를 지정해주어야 한다.
높이와 너비를 설정하면 페이지가로드 될 때 이미지에 필요한 공간이 미리 예약된다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 인식하지 못하고 적절한 공간을 미리 예약 할 수 없다. 그렇게 되면 이미지가 로드 되는 동안 페이지의 레이아웃이 변경된다.
14. list : datalist 태그를 사용할 때
<form> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>15. autocomplete : 자동완성
텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상 타입 사용시 이용 가능
Form Attribute
1. form 속성
form의 속성은 <input>태그가 속한 form을 지정한다.
아래와 같이 <input>태그가 <form> 태그 밖에 있더라도, <input> 태그의 'form' 속성의 값이, <form> 태그의 id와 동일하기에, <form> 태그 안에서 동작하는 것과 동일하게 동작한다.
<form action="/action_page.php" id="form1"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname" form="form1">2. formaction 속성
<input>의 formaction 속성은 form이 제출됐을대 동작할 파일의 URL을 지정한다.
formaction 속성은 <form> 요소의 action 속성값을 재정의(overriding)한다.
- input의 submit과 image 타입에서 사용 가능
3. formenctype 속성
POST 방식으로 제출할 시,데이터를 인코딩하는 방법을 지정한다.
formenctype 속성은 <form> 요소의 enctype 속성값을 재정의(overriding)한다.
- input의 submit과 image 타입에서 사용 가능
4. formmethod 속성
폼 데이터(form data)가 서버로 제출될 때 사용할 HTTP 메소드를 명시한다.
<form> 요소의 method 속성값을 재정의(overriding)한다.
- input의 submit과 image 타입에서 사용 가능
5. formnovalidate 속성 (boolean : default는 false)
서버로 제출될 때 해당 데이터의 유효성 검사를 하지 않음을 명시한다.
<form> 요소의 novalidate 속성값을 재정의(overriding)한다.
6. formtarget 속성
서버로 제출된 후 받는 응답(response) 데이터를 어디에 표시할 지를 명시한다.
formtarget 속성은 <form> 요소의 target 속성값을 재정의(overriding)한다.
이 글은 w3school과 TCP school를 참고하여 작성하였습니다.
'STUDY > HTML.CSS.JS' 카테고리의 다른 글