[HTML] 폼 구성하기(form 태그, input 태그, label 태그) -1

Oli-Viaaaa 2023. 7. 18. 18:04

1. form 태그

form태그는 폼 양식을 의미하는 태그로 HTML의 폼을 구성하는 태그는 모두 form태그 안에 작성한다.

형식)
	<form action="서버 url" method="get 또는 post"></form>

- action 속성

action 속성에는 form요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL주소를 적는다.

- method 속성

method 속성에는 입력받은 값을 서버에 전송할 때 송신 방식을 적는데 속성값으로는 get 또는 post를 사용할 수 있다.

2. input 태그

input 태그에는 type, name, value 속성이 있는데, type 속성을 필수로 사용해야하고,

name과 value 속성을 선택해서 사용할 수 있다.

형식)
	<input type="종류" name="이름" value="초기값">

- type 속성

type 속성은 입력된 값에 따라 상호작용의 요소를 결정하는데 이래의 표에 정리해두었다

속성값	설명
text	한 줄 텍스트를 입력할 수 있는 요소를 생성한다
password	비밀번호를 입력할 수 있는 요소를 생성한다
tel	전화번호 형식을 입력할 수 있는 요소를 생성한다
number	숫자만 입력할 수 있는 요소를 생성한다
url	URL 주소 형식을 입력할 수 있는 요소를 생성한다
search	검색용 텍스트를 입력할 수 있는 요소를 생성한다
email	이메일 형식을 입력할 수 있는 요소를 생성한다
checkbox	체크박스 요소를 생성한다
radio	라디오 버튼 요소를 생성한다
file	파일 업로드 요소를 생성한다
button	버튼 요소를 생성한다
image	이미지로 버튼 요소를 생성한다 따라서 img 태그처럼 src 속성을 사용해야한다 단 alt 속성은 사용하지 않는다
hidden	사용자 눈에 보이지 않는 입력 요소를 생성한다
date	날짜(연, 월, 일)를 선택할수 있는 입력 요소를 생성한다
datetime-local	사용자 시간대에 맞는 날짜(연, 월, 일, 시, 분)를 선택할 수 있는 입력 요소를 생성하다
month	날짜(연, 월)으 선택할 수 있는 입력 요소를 선택한다
week	날짜(연, 주차)를 선택할 수 있는 입력 요소를 생성한다
time	시간을 선택할 수 있는 입력 요소를 생성한다
range	숫자 범위를 선택할 수 있는 슬라이드 요소를 생성한다
color	색상을 선택할 수 있는 요소를 생성한다
submit	폼 전송 역할을 하는 버튼 요소를 생성한다
reset	폼 요소에 사용자가 입력한 값을 초기화하는 버튼 요소를 생성한다

- name 속성

name 속성에는 입력 요소의 이름을 작성한다 입력 요소가 form태그에 의해 서버로 전송될때 name 속성에 적힌 값이 이름으로 지정되며 서버에서는 지정된 이름으로 입력요소를 식별할 수 있다.

- value 속성

value 속성에는 입력 요소의 초기값을 작성한다. 입력 요소는 보통 사용자에게서 수동으로 값을 받지만 상황에 따라 설정해야하는데 이때 사용한다

3. label 태그

label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일때 사용하며

label 태그만 클릭해도 상호작용 요소를 선택할 수 있다.

사용 방법에 따라 암묵적인 방법과 명시적인 방법으로 구분하며 예시로는 아래와 같다

- 암묵적인 방법으로 label 태그에 상호작용 요소를 포함 시키는 방법

- 명시적인 방법은 label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 방법

예외적으로 암묵적인 방법과 명시적인 방법을 함께 사용할수도 있다