[HTML] HTML 다루기 (完)

이전 글에서 HTML의 인라인과 블록 요소 그리고 영역 태그 및 시멘틱 요소에 대해 알아보았다.

이번 글에서는 HTML의 form과 관련된 요소에 대해 알아보도록 하자.

<form>

• 사용자의 입력을 받아 처리하기 위한 태그이다.
• 내부 태그의 컨테이너 역할을 한다.
• 입력된 정보를 어떻게 서버에 전달할지 결정한다.

속성	역할	값
id	고유값 (이전의 name을 대체)
name	id를 사용할 것	텍스트
method	입력된 정보들의 전달 방식	get, post
action	정보들을 처리할 서버상의 프로그램 지정	텍스트
autocomplete	이전 입력 내역 있을 시 자동완성	on, off

form 내부에 사용되는 태그들

<label>

• 각 입력 양식의 레이블을 표시한다.
• label로 감싸진 영역은 label과 연결된 태그의 클릭 가능 영역으로 변경된다.

속성	역할	값
for	어떤 입력 양식의 레이블인지 지정	해당 입력 양식 요소의 id값

<input>

• 직접적으로 사용자의 입력을 받는 태그이다.
• type 속성에 따라 받는 입력에 대한 설정이 달라진다.

속성	역할	값	비고
id	고유값, label과 연결	텍스트
autocomplete	자동완성	boolean
autofocus	페이지로 들어올 때 커서가 위치	boolean	페이지에서 하나만 사용되어야 함
disabled	수정 불가, 값이 전송되지 않음	boolean
name	서버로 전송될 항목명	텍스트
readonly	수정 불가, 입력된 값은 전송됨	boolean
placeholder	입력값이 공백일 시 보여질 텍스트	텍스트	type="text"or"password"or"tel"
maxlength	최대 글자 수	숫자	type="text"or"password"or"tel"
max	최대 입력값	숫자	type="number"
min	최소 입력값	숫자	type="number"
step	입력 가능한 값의 간격 (2: 0, 2, 4, 8)	숫자	type="number"
checked	체크로 초기화 여부	boolean	type="checkbox"or"radio"
name	속한 선택지의 구분자	텍스트	type="radio"
multiple	여러 파일 가능 여부	boolean	type="file"

<button>

• 버튼을 생성하는 태그이다.
• form과 함께 사용될 시, 제출 트리거로 사용되는 태그이다.

속성	역할	값
type	버튼의 역할	submit, button
disabled	비활성화	boolean

<select> and <option>

• 여러 선택지를 제공하는 한 쌍으로 사용되는 태그이다.
• <select>는 선택지를 나타내는 태그이다.

속성	역할	값
id	고유값, label과 연결	텍스트
name	서버로 전송될 항목명	텍스트

• <option>은 선택 항목을 나타내는 태그이다.

속성	역할	값	비고
value	서버로 전송될 값	텍스트
selected	선택 여부	boolean	<select>당 하나의 <option>에만 가능

<textarea>

• 여러줄의 텍스트를 입력할 수 있는 필드를 나타내는 태그이다.

속성	역할	값
placeholder	입력값이 공백일 시 보여질 텍스트	텍스트
maxlength	최대 글자 수	숫자
rows	행의 수	숫자
cols	열의 수	숫자

HTML 정리를 마무리하며,

HTML에 대한 내용이 너무 방대해서 정리하지 못한 부분이 많았다.

혹여, HTML에 대해 궁금해 글을 읽어보는 사람이 생긴다면 실망할지도 모를 것이라 생각한다.

차후 기회가 생긴다면 다시 내용을 추가할지도 모르겠다.