폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용하는 것을 말한다.
한 페이지에서 중복하여 사용하면 안 된다.
✏️form 태그의 속성
method => 전송방식을 선택하는 것- get : 256~4096 byte까지만 전송 가능 - post : 입력 내용의 길이에 제한 X
name => form의 이름이며, 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
action => form을 전송할 서버 쪽의 script 파일을 지정, 전송되는 서버 url 또는 html 링크
target => action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
form의 요소중 하나. 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용한다.
type에 따라 어떤 형식으로 정보를 받을지 결정된다. id 값을 통해 서로 구분할 수도 있다.
✏️input type 속성
text => 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자<input type="text" value="write email or phone number" size="10" maxlength="5" />
tel => 전화번호 입력 필드
<input type="tel" />
url => url 주소 입력 필드
<input type="url" />
email => 메일주소 입력 필드 '@'가 들어간 이메일 형식인지 검사해준다.
<input type="email" id="useremail" name="useremail" />
password => 비밀번호 입력 필드
<input name="password" required type="password" placeholder="Password" />
range => 숫자 범위를 조절할 수 있는 슬라이드 막대/ min 과 max로 범위를 지정하고 step 으로 증가 값을 세팅할 수 있다.
<input type="range" id="volume" name="volume" min="0" max="11" />
checkbox => 체크박스 (2개이상 선택 가능)
<input type="checkbox" id="cookie" name="cookie" checked> <label for="cookie">Cookie</label>
radio => 라디오 버튼 (1개만 선택 가능)
<input type="radio" id="apple" name="drone" value="apple" checked> <label for="huey">Apple</label>
date => 사용자 지역을 기준으로 한 날짜(연, 월, 일)
<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31">
file => 파일을 첨부할 수 있는 버튼 (accept를 사용해 제출 가능한 파일 양식을 지정할 수도 있다.)
<input type="file" accept=".doc,.docx" />
submit => 서버전송 버튼
<input type="submit" value="Log In" />
reset =>리셋 버튼 사용자가 입력한 모든 정보를 지울 수 있다. 해당 Form에 입력했던 내용들을 처음부터 입력하고 싶을 때 활용함.
<input type="reset" />
여러 줄의 텍스트를 입력하는 창을 만든다.
select form 생성
option 생성
select는 선택만 할 수 있는 반면 datalist는 리스트에서 어느 한가지를 선택하거나 키워드에 입력할 수 있다.
아주 유용하게 쓰일 것 같다! =3=3