HTML form태그
form태그 필수 요소
form태그의 모든 양식은 <form> </form> 안에서 작성됩니다.
폼 name과 action, method가 필수 요소입니다.
<form name = "" action = "" method ="">Code language: HTML, XML (xml)- <form> 태그 안에 쓰이는 모든 양식은 name and id를 입력해야 합니다.
- action은 서버에 해당 데이터를 전송할 스크립트 파일을 지정합니다.
- method는 GET이나 POST를 이용해 저장합니다.
- GET은 url주소에 폼 데이터를 붙여서 보내는 방식이며, POST는 url주소에 폼 데이터가 보이지 않습니다.
form태그 input type 속성
<form> 태그 안에 쓰이는 대부분의 양식이 type 속성으로 정의됩니다. 정의되는 type 속성은 아래와 같습니다.
1.text
<input type = "text" name = "" id ="" placeholder = "직접 입력해보세요">Code language: HTML, XML (xml)2.password
<input type = "password" name = "" id ="" placeholder = "직접 입력해보세요">Code language: HTML, XML (xml)3.checkbox
<input type = "checkbox" name = "" id ="">Code language: HTML, XML (xml)4.radio
<input type = "radio" name = "" id ="" >Code language: HTML, XML (xml)5.image
이 주소의 이미지를 가져오겠습니다.
<input type = "image" src = "" alt = "image" name = "" id ="">Code language: HTML, XML (xml)6.file
파일 첨부 탭을 만듭니다.
<input type = "file" name = "" id ="">Code language: HTML, XML (xml)7.hidden
사용자에게는 보이지 않는 입력 필드로, 해당 폼이 제출될 때 사용자가 수정해서는 안 되는 데이터를 보낼 때 사용됩니다.
<input type = "hidden" name = "" id ="">Code language: HTML, XML (xml)실제로 보이지 않습니다.
이외 input 태그에 해당하지 않는 button, select, textarea는 독립적인 태그로 따로 사용합니다.
form태그 button type 속성
원래는 input 태그 안에 포함되어있던 속성이지만, 현재는 반드시 button type으로 지정해주어야 하는 옵션들입니다.
1.button
<button type = "button" name = "" id ="">button</button>Code language: HTML, XML (xml)2.submit
<button type = "submit" name = "" id ="">submit button</button>Code language: HTML, XML (xml)3.reset
<button type = "reset" name = "" id ="">reset button</button>Code language: HTML, XML (xml)form태그 select type 속성
<select>
<option>네이버</option>
<option>다음</option>
</select>Code language: HTML, XML (xml)form태그 textarea 속성
<textarea rows="10" cols="50"></textarea>Code language: HTML, XML (xml)웹 표준을 지키면서 폼 태그를 사용하려면 앞서 소개한 input 요소들은 반드시 <label> 태그와 같이 사용되어야 합니다.
input 요소들은 <fieldset> or <div> 태그 안에 사용되어야 합니다.
그룹핑 태그
- 목적이나 의미가 있을 경우 : fieldset 태그
- 디자인을 위해서 필드를 묶을 경우 : div 태그
fieldset : 양식의 소그룹 (폼 태그 안에서 그룹을 묶을 때)
legend : fieldset의 제목
label : 필드와 텍스트의 그룹
for(속성) : 연결하고자 하는 필드의 id값 작성
코드를 완성하겠습니다.
전체 코드
<fieldset>
<legend>그룹에 대한 설명</legend>
<p>
<label for = "txt">아이디</label>
<input type = "text" name = "" id ="txt">
</p>
</fieldset>Code language: HTML, XML (xml)