Programming

<form></form> : 입력양식

입력양식을 정의함

속성

action

action="주소"

form 데이터를 보낼 주소를 지정함

target

target="속성"

데이터를 제출한 후 응답을 표시할 위치를 정함

속성

_blank

새창

_parent

부모창

_self

자신의 창

_top

모든 프레임을 지우고 전체 창

프레임이름

지정된 프레임

method

method="속성"

form 데이터를 보낼 방법을 지정함

속성

get

기본값

URL?name=value&name=value 형식으로 전달함

post

HTTP post transaction 형식으로 전달

주소창에 데이터가 보이지 않음

name

name="이름"

form의 이름을 정의함

요소

<input></input>

<textarea></textarea>

<button></button>

<select></select>

<option></option>

<optgroup></optgroup>

<fieldset></fieldset>

<legend></legend>

<label></label>

<datalist></datalist>

<output></output>

<input></input>

사용자가 입력할 수 있는 입력 창을 정의함

속성

type

type="속성"

표시할 입력 요소를 지정함

list

list="값"

미리 정의된 옵션을 포함하는 datalist 태그를 참조함

name

name="이름"

input 태그의 이름을 지정함

value

value="값"

input 태그의 값을 지정함

• "text", "password", "hidden"
: 입력창의 기본 값
• "button", "reset", "submit"
: 버튼안의 글자
• "checkbox", "radio", "image"
: 제출시 전송되는 값
• "file"
: 쓸 수 없음

form

form="값"

한개 이상의 form을 연관시킴

size

size="값"

폭을 지정함

"text", "password", "search", "tel", "url", "email"과 함께 사용됨

max

max="값"

최댓값을 지정함

min

min="값"

최솟값을 지정함

maxlength

maxlength="값"

최대 입력 문자 수를 지정함

multiple

multiple(bool형)

복수선택 가능하도록 지정

autofocus

autofocus(bool형)

페이지가 열렸을 때 현재의 input 태그를 가르킴

required

required(bool형)

필수요소인지 결정함(제출하기 전에 이 영역이 채워져 있어야 함)

"text", "password", "search", "url", "tel", "email", "date pickers", "number", "checkbox", "radio", "file"과 함께 사용됨

pattern

pattern="정규 표현식"

정규 표현식(regular expression)으로 표현된 패턴을 지정함

"text", "date", "search", "url", "tel", "email", "password"과 함께 사용됨

참고 : w3schools input pattern

placeholder

placeholer="값"

입력 영역에 짧은 힌트나 예상 값을 표시함

disabled

disabled(bool형)

입력 영역을 비활성화 함(데이터도 전송되지 않음)

readonly

readonly(bool형)

읽기 전용으로 지정

<input type="속성"></input>

표시할 입력 요소를 정의함

속성

text

기본값

단일행, 텍스트 입력

password

비밀번호 입력(입력한 내용은 감춰짐)

checkbox

체크박스

radio

라디오버튼

submit

제출버튼

reset

리셋버튼

button

클릭할 수 있는 버튼

주로 JavaScript와 함께 스크립트를 사용할 때 쓰임

search

검색할 문장

number

숫자 입력

range

정확한 값이 중요하지 않은 숫자

color

색상 선택

date

날짜 선택(년, 월, 일)

datetime-local

날짜, 시간 선택(년, 월, 일, 시, 분, 초)

month

월, 년

week

주, 년

time

시간

email

이메일 주소

tel

핸드폰 번호

url

주소 입력

image

제출 버튼으로 이미지를 지정

file

파일 업로드

hidden

숨겨진 입력창

<textarea></textarea>

여러줄의 텍스트를 편집할 수 있는 입력양식을 정의함

속성

name

name="이름"

textarea 태그의 이름을 지정함

dirname

dirname="이름(name 태그).dir

textarea의 텍스트 방향을 결정함

rows

rows="값"

textarea에 표시될 행을 지정함

cols

cols="값"

textarea에 표시될 폭을 지정함

wrap

wrap="속성"

제출할 때 텍스트 줄바꿈하는 방법을 지정함

속성

soft

줄바꿈되지 않음(기본값)

hard

줄바꿈되도록 사용자 에이전트가 줄바꿈 문자들을 삽입하도록 지정함

maxlength

maxlength="값"

최대 입력 문자 수를 지정함

form

form="값"

한개 이상의 form을 연관시킴

placeholder

placeholer="값"

입력 영역에 짧은 힌트나 예상 값을 표시함

autofocus

autofocus(bool형)

페이지가 열렸을 때 현재의 button 태그를 가르킴

disabled

disabled(bool형)

선택 영역을 비활성화 함(데이터도 전송되지 않음)

required

required(bool형)

필수요소인지 결정함(제출하기 전에 이 영역이 채워져 있어야 함)

readonly

readonly(bool형)

읽기 전용으로 지정

<button></button>

클릭 가능한 버튼을 정의함

속성

name

name="이름"

button 태그의 이름을 지정함

value

value="값"

전송되는 데이터의 초기값을 지정함

type

type="속성"

버튼의 유형을 지정함

속성

submit

제출 버튼(기본값)

reset

리셋 버튼

button

클릭 가능한 버튼(아무것도 하지 않음)

autofocus

autofocus(bool형)

페이지가 열렸을 때 현재의 button 태그를 가르킴

disabled

disabled(bool형)

선택 영역을 비활성화 함(데이터도 전송되지 않음)

<select></select>

선택 목록을 생성함

속성

name

name="이름"

select 태그의 이름을 지정함

size

size="값"

선택 목록의 갯수를 지정함

autofocus

autofocus(bool형)

페이지가 열렸을 때 현재의 input 태그를 가르킴

disabled

disabled(bool형)

선택 영역을 비활성화 함(데이터도 전송되지 않음)

form

form="값"

한개 이상의 form을 연관시킴

multiple

multiple(bool형)

복수선택 가능하도록 지정함

required

required(bool형)

필수요소인지 결정함(제출하기 전에 이 영역이 채워져 있어야 함)

<option></option>

select 태그의 자식 요소로 각 항목을 정의함

value

value="값"

서버로 전송되는 값을 지정함

label

label="값"

라벨을 지정함

selected

selected(bool형)

미리 선택되게 지정함

disabled

disabled(bool형)

옵션 요소를 비활성화 함

<optgroup></optgroup>

select 태그의 자식 요소로 option 태그로 이루어진 항목을 그룹화함

속성

label

label="값"

라벨을 지정함

disabled

disabled(bool형)

옵션 그룹의 요소 모두를 비활성화 함

<fieldset></fieldset>

관련된 요소들을 그룹화 함

속성

disabled

disabled(bool형)

관련 그룹의 요소 모두를 비활성화 함

name

name="이름"

fieldset 태그의 이름을 지정함

form

form="값"

한개 이상의 form을 연관시킴

<legend></legend>

fieldset 태그의 캡션을 지정함

<label></label>

input 태그에 대한 라벨을 정의함

사용자에게 특별한 것은 아니나, 사용자가 label 태그 내의 텍스트를 클릭하면 입력창으로 토글되기 때문에 마우스 사용자의 유용성이 향상됨

속성

for

for="값"

다른 요소의 id값과 같은값을 지정하여 연관시킴

form

form="값"

한개 이상의 form을 연관시킴

<datalist></datalist>

input 태그에 대해 미리 정의된 옵션의 목록을 지정함

<output></output>

계산 결과를 나타냄

속성

for

for="값"

계산 결과와 계산에 사용된 요소 사이의 관계를 지정함

name

name="이름"

output 태그의 이름을 지정함

form

form="값"

한개 이상의 form을 연관시킴

참고 : w3schools Forms