[html] FORM태그 사용하기

---

웹 페이지 내에서 사용자로부터 입력을 받을 때에는 <form> 태그를 사용한다.

<form> 태그를 사용하면 사용자가 입력한 데이터를 다른 페이지로 전송하거나 페이지 내에서 사용할 수 있다.

---

<form>

<form action="[데이터를 전달할 URL or 페이지 경로]" method="[전송방식]" name="[form이름]"> 입력 양식 </form>

일반적으로 위와 같이 작성한다.

 

action: 전송 버튼을 눌렀을 때 form의 내용이 전달되는 URL을 지정한다. 생략 시 현재 페이지로 지정된다.

method: 전송방식을 설정한다. 생략 시 get방식으로 설정된다.

★전송방식: get, post, delete,... 등이 있으며 일반적으로 get방식과 post방식이 사용된다.

입력 양식: <input>, <select>, <datalist>, <progress>, <fieldset>,... 이 있다.

---

<input>

<input> 태그는 입력받기 위해 사용되는 태그이다.

<input type="[타입명]">을 기본 형식으로 사용된다.

 

input 태그의 속성

size : 글 상자의 크기

maxlength : 값의 최대 길이

placeholder : 사용자의 입력 이전에 보여줄 기본 값

readonly : 수정할 수 없도록 설정

name : 요소의 이름을 설정 (파라미터의 KEY값)

value : 미리 값을 지정 (파라미터의 VALUE값)

required : 필수 항목

 

input 태그의 type

text : 텍스트 입력

password : 보이지 않는 텍스트 입력

radio : 여러 개의 옵션 중 단일 선택

checkbox : 여러 개의 옵션 중 다중 선택

file : 파일 전송(첨부)

email : 이메일 입력 (@가 포함되어야 한다.)

date : 날짜 선택 (브라우저별로 다른 UI로 선택)

color : 원하는 색상 선택

URL : URL 입력 (http://로 입력한다.)

tel : 핸드폰 번호 입력

number : 숫자 입력 (수치를 조절할 수 있는 버튼이 존재한다.)

    number type의 속성 : min(최솟값), max(최댓값), step(버튼으로 증감하는 단위)

range : 입력 범위 안의 값만 입력 (범위를 선택하는 바가 생성)

search : 검색어 입력 (입력 칸 우측에 x버튼이 생긴다.)

submit :누르자마자 action으로 이동하는 버튼

reset : 초기화 버튼

button : 눌렀을 때 action으로 이동하지 않고 지정한 액션을 행한다. (일반적인 button태그와 다르다.)

See the Pen abBvgBK by Heekng (@heekng) on CodePen.

 

 

---

<select>

<select> 요소는 어러 개의 옵션이 드롭다운 리스트로 되어 있다.

리스트 중에서 단 하나의 옵션을 입력받을 수 있다.

<option> 요소를 이용하여 옵션 리스트를 설정한다.

<select name="[요소명]">

    <option value="내부 값">외부 표현 값</option>

    <option value="내부 값">외부 표현 값</option>

</select>

 

 

위와 같은 형태로 사용한다.

See the Pen vYyNqqN by Heekng (@heekng) on CodePen.

 

 

 

---

<textarea>

<textarea> 요소는 여러 줄의 텍스트를 입력받을 수 있는 문장 요소이다.

<textarea cols="가로글자수크기" rows="세로 글자수 크기">기본 값</textarea>

위의 형태로 작성한다.

See the Pen KKNdOge by Heekng (@heekng) on CodePen.

---

<datalist>

<datalist> 요소는 미리 지정된 옵션 목록을 제공한다.

일정 부분은 <select>와 비슷하지만 사용자가 입력함에 맞추어서 옵션 리스트를 보여주고 선택할 수 있게 도와준다.

<input type="text">와 함께 사용한다.

<input type="text" list="[datalist id]">
<datalist id="[datalist id]">
	<option values="내부 값">외부 표시값</option>
    <option values="내부 값">외부 표시값</option>
    <option values="내부 값">외부 표시값</option>
    <option values="내부 값">외부 표시값</option>
    ...
</datalist>

위의 형태로 작성한다.

See the Pen VwmvoQK by Heekng (@heekng) on CodePen.

---

<progress>

<progress> 태그를 이용하면 진행 정도를 나타낼 수 있다.

진행 정도는 막대에 게이지가 차듯이 표현한다.

<progress value="현재값" max="최대 값"></progress>

위 형태로 작성한다.

See the Pen YzpymvN by Heekng (@heekng) on CodePen.

---

<fieldset>, <legend>

<fieldset> 요소는 폼 필드 내에서 서로 관련 있는 폼 필드 세트를 표시한다.

단순하게 여러 요소들을 묶어서 표시하는 상자를 만드는 것이다.

<legend> 요소를 이용하여 fieldset의 이름을 표시할 수 있다.

<fieldset>
	<legend>[fieldset이름 또는 원하는 문자열]</legend>
	[form 요소 추가]
    [form 요소 추가]
    ...
</fieldset>

위 형태로 작성한다.

See the Pen zYovgbG by Heekng (@heekng) on CodePen.