form 태그

---

• 사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그

속성	의미
method	※ get   - URL 창을 통하여 데이터를 보내는 방식   - data 크기에 제한이 있음 (256 ~ 4096Byte)   - data가 눈으로 보임 ※ post   - http header 안에 포함하여 보내는 방식   - data 크기에 제한이 없음   - data를 쉽게 볼 수 없음 (기술적으로만 볼 수 있음)
name	<form> 태그의 고유 이름 지정, <form>을 구분 하기 위해 사용
action	데이터를 처리 할 프로그램(페이지)을 지정
target	action 속성의 프로그램(페이지)를 어떻게 열 것인지를 지정
autocomplete	※ 자동 저장 기능 같은 것   - 이전 입력내용 출력하는 기능, 생략하면 자동으로 출력 (default : on)   - form에 autocomplete를 지정하면 form에 속하는 input 들에게 모두 적용 됨

👉 작성 예시 1

<form action="https://search.naver.com/search.naver" method="get" autocomplete="on">
    <input type="text" name="query">
    <input type="submit" value="검색">
</form>

✍ 작성 예시 2

<form action="/action_page.html" method="get" autocomplete="on">   
    ID : <input type="text" name="id">  <br/>          
    PW : <input type="password" name="pw">  <br/>       
    <input type="submit">    
</form>

👉 결과 2

fieldset, legend 태그

---

• fieldset :폼 요소를 그룹으로 묶는 태그
• legend:묶은 폼 요소에 명칭을 붙이는 태그

속성	의미
name	fieldset의 이름 지정
form	fieldset이 속한 form의 이름 지정 fieldset으로 폼요소를 묶고 legend를 통하여 묶은 폼요소에 명칭을 붙임

✍ 작성 예시

<form action="/action_page.html" method="get" autocomplete="on">
    <fieldset>
    <legend>회원가입</legend>
    ID : <input type="text" name="id"> <br/>
    PW : <input type="password" name="pw"> <br/>
    <input type="submit" value="로그인">
    </fieldset>
</form>

👉 결과 2

input 태그

---

• 사용자로부터 data를 입력받기 위한 태그
  
  

• type: 입력창의 타입을 결정하는 속성 (text,checkbox,radio,select 등)

속성	의미
text	한줄 짜리 텍스트 입력 창이 생김 (입력 그대로 보임)
password	비밀번호 입력 창 (입력시 ●●● 으로 표시 됨)
hidden	사용자에게 보이지는 않지만 값을 넣을 수 있는 창 관리자에게 필요한 값을 넣을 때 필요
button	버튼 생성, 자체 별도 기능은 없고 스크립트에서 함수 연결하여 활용
checkbox	체크박스 생성
file	파일입력 양식 출력
image	이미지 형태를 생성 (버튼 대신 이미지가 submit 역할도 함)
radio	라디오 버튼 생성
submit	입력한 데이터를 다른 페이지로 넘기는 기능 (submit은 제출하다라는 뜻을 가지고 있음)
reset	입력한 내용을 지우는 기능
value	input 요소의 기본값 표시
name	input 마다 구별할 수 있는 명칭
min/max/step	허용하는 범위 최소값 / 최대값 / 값의 증감값
autocomplete	자동완성 기능
height/width	입력창의 높이와 넓이
readonly	읽기 전용 필드
accept	파일 타입에 대해 사용자에게 알려주는 기능
multiple	여러 개의 값을 입력 가능
placeholder	사용자 입력전 입력창 표시글
autofocus	입력창 커서 표시
required	필수 입력 필드 지정
list	<datalist>의 옵션값을 <input> 안에 나열
maxlength	사용자가 입력할 수 있는 글자수의 제한
size	화면에서 표시하는 글자수
minlength	최소입력 글자 지정 (최신 크롬, 안드로이드만 지원)
formaction	실행할 프로그램 연결 (submit / image 일때 사용)
formenctype	전송시 어떤방식으로 해석할지 지정 (submit / image 일때 사용)
formnovalidate	전송시 데이터가 유효한지 여부를 표시
formtarget	서버의 응답을 어디에 표시할 것인지 지정

text 타입

---

속성	의미
name	text type 구분자 또는 명칭
size	사용자 화면에 보여줄 문자 입력 창의 길이
value	text에 들어갈 값 , 설정하지 않으면 빈 값
maxlength	총 입력 받을 개수

👨‍🎓 작성방법

<input type=text name="명칭" value="값" size="숫자" maxlength="숫자">

password 타입

---

속성	의미
name	password type의 이름 또는 명칭
minlength	password에 들어갈 최소문자수
maxlength	password에 들어갈 최대문자수

👨‍🎓 작성방법

<input type=password name="명칭" minlength="숫자" maxlength="숫자">

button 타입

---

속성	의미
id	id type의 구분자(name은 중복 가능, id는 중복 불가 함)
value	button에 표시될 값
event	자바 스크립트를 불러온 행동 (예 : onclink)

👨‍🎓 작성방법

<input type=button id="명칭" value="값" onclink="스크립트 함수">

file 타입

---

속성	의미
multiple	파일 다중 선택 가능

👨‍🎓 작성방법

<input type=file name="명칭">
<input type=file name="명칭" multiple>

그외 html5에서 지원되는 input 태그의 type들

---

input 태그의 type	의미	작성 방법
color	색상을 선택할 수 있게 하는 타입	<input type="color" name = "명칭" />
date datetime-local month week	날짜 및 시간을 선택할 수 있도록 하는 타입	<input type="타입명" id="명칭" min="0000-00-00" max="0000-00-00" step="숫자" value="날짜"/> ※ date : yyyy-mm-dd ※ detetime-local : yyyy-mm-ddT00:00(24) ※ month : yyyy-mm
time	시간을 표현하는 타입	<input type="time" value="12:00"/>
number	숫자값을 선택하는 타입 - value: 초기 표현 값	<input type="number" min="1" max="100" step="2" value="1"/>
range	슬라이드 막대로 숫자 지정	<input type="range" id="명칭" min="숫자" max="숫자" value="숫자">
search tel email url	- 검색어 입력하는 창 출력 입력구에 X 버튼이 생김 - 전화번호를 입력하는 창 출력 (자동으로 번호임을 인식) - @ 를 포함하여 작성하여야 하는 창 생성 (@가 있는지 확인 함) - 주소값을 입력하는 창 출력 (http://가 있는지 확인 함)	<input type="search"/"url"/"email"/"tel" id="명칭" value="초기값">

select, option, optgroup 태그

---

• select는 option과 함께 쓰이며, option에 목록을 작성하고, select 태그를 통해 선택할 수 있게 하는 태그
• selected 를 사용하면 기본적으로 초기 선택값을 지정할 수 있다.
• optgroup 태그를 사용하면 목록별로 그룹을 지을 수 있다.

ex)

<select>
   
    <optgroup label="르노삼성">
        <option >SM3</option>
        <option >SM5</option>
        <option >SM6</option>
    </optgroup>
    
    <optgroup label="현대">
        <option >아반떼</option>
        <option >그랜저</option>
    </optgroup>
    
</select>

datalist 태그

---

• datalist 혼자 쓰이진 않고, input 태그와 함께 쓰일 수 있음
• select와 다른점은 input type="text"와 함께 쓰여 직접 작성이 가능
• option 태그와 함께 쓰임

ex)

좋아하는 가수 <br/>

<datalist id="who" >
    <option value="악동뮤지션">
    <option value="아이유">
    <option value="블랙핑크">
    <option value="빅뱅">
</datalist>

<input type="text" list="who" />

textarea 태그

---

• 긴 문자의 텍스트를 작성할 때 사용하는 태그
• cols 속성과 rows 속성으로 초기 작성하는 공간 지정 가능

✍ 작성 예시

메모 : <textarea cols="50" rows="5"></textarea>