[html] 폼 태그 종류/ form, input, textarea, select, option, datalist, legend, button / <form>, <input>, <textarea>, <select>, <option>, <datalist>, <legend>란

dazzle·2023년 1월 5일
1

frontend

목록 보기
6/14

[html]

< form > 란,

폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용하는 것을 말한다.
한 페이지에서 중복하여 사용하면 안 된다.

✏️form 태그의 속성
method => 전송방식을 선택하는 것

  		- get : 256~4096 byte까지만 전송 가능
 		- post : 입력 내용의 길이에 제한 X   

name => form의 이름이며, 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
action => form을 전송할 서버 쪽의 script 파일을 지정, 전송되는 서버 url 또는 html 링크
target => action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정

< input > 란,

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" />

< textarea > 란,

여러 줄의 텍스트를 입력하는 창을 만든다.

< select > 란,

select form 생성

< option > 란,

option 생성

< datalist > 란,

select는 선택만 할 수 있는 반면 datalist는 리스트에서 어느 한가지를 선택하거나 키워드에 입력할 수 있다.

아주 유용하게 쓰일 것 같다! =3=3

0개의 댓글