Form
HTML에서 Form은 정보를 입력하는 영역이다. 회원 가입을 할 시 ID, PW, 이름, 나이 등 다양한 정보를 입력하고, 이 정보를 DB로 전송할때 사용한다.
속성
Form 속성은 Action, Method, Name으로 나뉜다.
Action 은 입력값을 전송할 페이지를 나타낸다.
Method는 폼의 데이터 전송 방법을 정의한다. 기본적으로 Get과 Post가 있다.
Get은 웹 서버에 데이터를 요청할 때 사용된다.
Post는 파일을 올리거나 데이터를 전송할 때 사용된다.
Name은 폼의 이름을 지정한다.
타입
text : text를 그대로 표현
password : 마스크 처리된 text
textarea : 여러 줄의 text 입력
search : 검색 창
data : 날짜 입력
time : 시간 입력
range : 슬라이드 바 형식
number : 수를 선택할 수 있게 함
color : 색을 선택할 수 있게 함
radio : 선택 항목 중 택 1
checkbox : 선택 항목 중 다중 선택 가능
file : 파일 업로드
email : 이메일 주소 입력
url : 웹페이지 주소 입력
tel : 전화번호를 입력
Input
input은 사용자가 다양하게 폼 태그에 입력할수있는 공간을 제공한다. 사용자가 직접 입력한다.
속성
type : 태그 모양을 다양하게 변경할 수 있다.
name : 태그 이름을 지정한다.
readonly : 태그를 읽기전용으로 한다.
maxlength : 글짜 최대 수 지정한다.
required : 필수 태그로 지정된다.
autofocus : 웹 페이지가 로딩 되면 이 속성을 지정한 태그로 포커스를 바꾼다.
palceholder : 입력할 값에 대한 힌트 제공한다.
pattern : 특정 범위 내의 유효한 값을 입력 받을 때 사용한다.
Label
label은 input태그를 시멘틱하게 코딩하기위해 사용한다.
사용법
- label 안에 input을 넣는 경우.
<label>
이름 :
<input type="text" name="username">
</label>- 폼 안에서 분리하여 for속성을 이용한 경우
<label for="username">이름 : </label>
<input type="text" name="name" id="username">for 속성
for 속성은 input 과 같은 폼 컨트롤을 의미한다.
Select
select 요소는 드롭다운 리스트 박스를 생성한다. 생성시 리스트 박스 안의 아이템을 만들 때는 option 태그를 사용한다.
select 속성
multiple="multiple" : 사용자가 여러개의 option 요소를 선택할 수 있게 된다.
size : 드롭타운 리스트에서 한번에 보여줄 수 있는 option 갯수 조절
option 속성
value: option요소는 value 속성을 사용하여 선택값에 따라 서버에 어떠한 값을 전송할지 설정할수 있다.
selected: 페이지가 로딩되고 난 뒤 기본으로 선택되는 옵션을 나타낼 때 사용한다.
Button
button 은 클릭 가능한 버튼을 나타낸다.
속성
submit : 버튼이 서버로 양식 데이터를 제출한다.
reset : form의 모든 값을 초기화 한다.
button : 클릭 가능한 버튼이다.
Github : https://github.com/SeongYoonMin/Front_end_School_HTML
