폼 관련 태그 - html 배우기

폼 관련 태그

form 태그

• 사용자가 입력한 데이터를 서버로 전송할 때 사용하는 태그
• 사용자가 입력한 데이터를 서버로 전송하는 방식은 GET 방식과 POST 방식이 있다.

GET 방식

• 데이터를 URL 뒤에 붙여서 전송하는 방식으로 데이터가 노출되는 단점이 있다.
• 예를 들어, 아래와 같이 URL 뒤에 데이터를 붙여서 전송한다.

<form action="http://www.example.com?이름=값" method="GET">
    <input type="text" name="이름" value="값" />
    <input type="submit" value="전송" />
</form>

POST 방식

• 데이터를 URL 뒤에 붙이지 않고 전송하는 방식으로 GET 방식보다 보안성이 높다.
• 데이터를 전송할 때 사용하는 태그는 input 태그이다.

<form action="http://www.example.com" method="POST">
    <input type="text" name="이름" value="값" />
    <input type="submit" value="전송" />
</form>

input 태그

• 사용자가 입력한 데이터를 받아들이는 태그
• type 속성을 사용해서 입력 데이터의 종류를 지정할 수 있다.

<input type="text" name="이름" value="값" />

type 속성 값	설명
text	한 줄의 텍스트를 입력할 수 있는 텍스트 박스
password	한 줄의 텍스트를 입력할 수 있는 텍스트 박스(입력한 내용이 숨겨짐)
radio	여러 개의 항목 중에서 하나의 항목을 선택할 수 있는 라디오 버튼
checkbox	여러 개의 항목 중에서 여러 개의 항목을 선택할 수 있는 체크 박스
file	파일을 첨부할 수 있는 파일 첨부 박스
submit	폼을 전송할 때 사용하는 전송 버튼
reset	입력한 내용을 초기화할 때 사용하는 초기화 버튼
button	아무런 기능이 없는 버튼

label 태그

• 폼 요소의 이름을 지정할 때 사용하는 태그
• for 속성을 사용해서 폼 요소와 연결할 수 있다.

<label for="폼 요소의 id 속성 값">폼 요소의 이름</label> <input type="text" name="이름" value="값" />

select 태그

• 여러 개의 항목 중에서 하나의 항목을 선택할 수 있는 드롭다운 목록을 만들 때 사용하는 태그
• option 태그를 사용해서 드롭다운 목록의 항목을 만들 수 있다.

<select name="이름">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

textarea 태그

• 여러 줄의 텍스트를 입력할 수 있는 텍스트 박스를 만들 때 사용하는 태그

<textarea name="이름" cols="가로 크기" rows="세로 크기">값</textarea>

fieldset 태그

• 폼 요소를 그룹화할 때 사용하는 태그
• legend 태그를 사용해서 그룹의 이름을 지정할 수 있다.

<fieldset>
    <legend>그룹 이름</legend>
    <input type="text" name="이름" value="값" />
</fieldset>

button 태그

• 아무런 기능이 없는 버튼을 만들 때 사용하는 태그

<button type="button">버튼</button>

button vs input type="button" 의 차이점

• button 태그는 내용을 지정할 수 있지만 input 태그는 내용을 지정할 수 없다.
• button 태그는 여러 줄의 텍스트를 입력할 수 있지만 input 태그는 한 줄의 텍스트만 입력할 수 있다.
• button 태그는 이미지를 사용할 수 있지만 input 태그는 이미지를 사용할 수 없다.

form 태그의 속성

속성	설명
action	폼을 전송할 때 사용할 서버의 URL을 지정한다.
method	폼을 전송할 때 사용할 HTTP 요청 방식을 지정한다. (GET, POST 방식)
target	폼을 전송한 후 결과를 표시할 위치를 지정한다. (_self, _blank)
enctype	폼을 전송할 때 사용할 인코딩 방식을 지정한다. (application/x-www-form-urlencoded, multipart/form-data)

input 태그의 속성

속성	설명
type	입력 데이터의 종류를 지정한다.
name	입력 데이터의 이름을 지정한다.
value	입력 데이터의 기본값을 지정한다.
checked	라디오 버튼이나 체크 박스의 기본값을 지정한다. (checked, checked)
size	텍스트 박스의 가로 크기를 지정한다.
maxlength	텍스트 박스에 입력할 수 있는 최대 글자 수를 지정한다.
readonly	텍스트 박스에 입력할 수 없도록 만든다.
disabled	폼 요소를 비활성화시킨다.
placeholder	텍스트 박스에 힌트를 표시한다.
autofocus	페이지가 로드될 때 자동으로 포커스를 지정한다.
autocomplete	텍스트 박스에 자동 완성 기능을 사용할지 여부를 지정한다.
multiple	파일 첨부 박스에서 여러 개의 파일을 선택할 수 있도록 만든다.
accept	파일 첨부 박스에서 허용할 파일의 종류를 지정한다.

label 태그의 속성

속성	설명
for	폼 요소와 연결된 id 속성 값을 지정한다.

select 태그의 속성

속성	설명
name	드롭다운 목록의 이름을 지정한다.
size	드롭다운 목록에 표시할 항목의 개수를 지정한다.
multiple	드롭다운 목록에서 여러 개의 항목을 선택할 수 있도록 만든다.
autofocus	페이지가 로드될 때 자동으로 포커스를 지정한다.
autocomplete	텍스트 박스에 자동 완성 기능을 사용할지 여부를 지정한다.

textarea 태그의 속성

속성	설명
name	텍스트 박스의 이름을 지정한다.
cols	텍스트 박스의 가로 크기를 지정한다.
rows	텍스트 박스의 세로 크기를 지정한다.
maxlength	텍스트 박스에 입력할 수 있는 최대 글자 수를 지정한다.
readonly	텍스트 박스에 입력할 수 없도록 만든다.
disabled	폼 요소를 비활성화시킨다.
autofocus	페이지가 로드될 때 자동으로 포커스를 지정한다.
wrap	텍스트 박스의 줄 바꿈 방식을 지정한다. (soft, hard)
placeholder	텍스트 박스에 힌트를 표시한다.

fieldset 태그의 속성

속성	설명
name	그룹의 이름을 지정한다.

button 태그의 속성

속성	설명
name	버튼의 이름을 지정한다.
value	버튼의 기본값을 지정한다.
disabled	폼 요소를 비활성화시킨다.
autofocus	페이지가 로드될 때 자동으로 포커스를 지정한다.