[HTML] form, input 태그의 모든 것

form 요소

 

<form> 태그

• 사용자로부터 입력받고, 입력받은 데이터를 서버로 보낼 수 있다.
• action 속성은 입력받은 데이터를 처리할 url, 파일위치, 특정 주소값등을 명시한다.
• method 속성은 데이터 전송 방식을 명시한다. GET방식과 POST 방식이 있다.
• method 속성이 생략되거나 빈 값이면 GET 방식으로 설정된다.

 

 

 

<form> 요소

 

요소	설명
<input>	다양한 타입의 input 요소를 활용하여 사용자로부터 입력을 받을 수 있다.
<label>	여러 form 요소에 대한 타이틀 역할로 label을 정의한다.
<select>	드롭다운 목록
<textarea>	여러 줄 입력
<button>	클릭 가능한 버튼

 

 

 

 

input 요소

 

<input> 유형(type)

 

유형(type)	설명
<input type="text">	한 줄 텍스트 입력
<input type="password">	비밀번호
<input type="number"	숫자 입력
<input type="email">	이메일 입력
<input type="tel">	전화번호 입력
<input type="range">	범위 입력
<input type="search">	검색어 입력
<input type="date">	날짜 입력
<input type="datetime-local">	날짜와 시간 입력
<input type="time">	시간 입력
<input type="month">	연도와 월 입력
<input type="week">	연도와 주 입력
<input type="color">	색상 입력
<input type="url">	URL 주소 입력
<input type="image">	이미지 버튼 입력
<input type="button">	버튼 입력
<input type="submit">	전송 버튼
<input type="reset">	리셋 버튼
<input type="file">	파일 선택
<input type="hidden">	숨겨진 입력
<input type="checkbox">	체크박스
<input type="radio">	라디오 버튼

 

 

 

<input> 속성

 

속성	설명
value	입력창의 초기값 지정
name	key:value 형태로 전송될 때 key name
readonly	읽기 전용(전송할 경우 초기값 전송됨)
disabled	사용 불가(전송도 되지 않음)
checked	미리 선택 지정
max	입력창의 최대값을 지정
maxlength	입력창의 최대 문자 수를 지정
min	입력창의 최소값을 지정
pattern	입력값을 체크할 정규 표현 지정
required	입력창이 필수임을 지정
size	입력창의 너비(문자 단위)지정
step	입력창의 정규식 지정
multiple	입력창의 다중선택 지정
placeholder	입력창의 예상 값 또는 간단한 설명 지정

 

 

 

 

※ 참고자료

http://www.tcpschool.com/html/intro

https://www.w3schools.com/html/default.asp