입력 양식 태그 (모던웹책 윤인성 作)

입력양식 태그 정리

입력양식은 사용자에게 입력받는 공간을 의미합니다.

입력양식 태그는 대표적으로 회원가입 양식이 있습니다.

---

1 입력양식은 form 태그를 사용한다.

그 입력양식 안에는 input 태그를 사용한다.

<form action="">
    <label for="name">이름</label>
    <input id="name" type="text">
 </form>

*label 의 for은 input의 id 로 받는다.

1.1 form 태그의 속성

속성 이름	설명
action	입력 데이터의 전달 위치를 지정합니다.
method	입력 데이터의 전달 방식을 선택합니다.  (get, post)

1.2 input 태그의 type 속성값

속성값	설명
button	버튼을 생성합니다.
checkbox	체크박스를 생성합니다.  (radio 버튼과 다르게 같은 name을 갖고있으면 다중선택이 가능함)
file	파일 입력 양식을 생성합니다.
hidden	보이지 않습니다.
image	이미지 형태를 생성합니다.
password	비밀번호 입력 양식을 생성합니다.
radio	라디오 버튼을 생성합니다.  (라디오박스든 체크박스든 웹페이지를 열었을때 기본적으로 선택되게 하려면 값이없는 checked 라는 속성을 넣어주면 된다.
reset	초기화 버튼을 생성합니다.
submit	제출 버튼을 생성합니다.  (value = 안에 입력되는 내용)
text	글자 입력 양식을 생성합니다.

 

label 태그:

 

label는 input 태그를 설명하는 데 사용합니다.

label 태그는 어떠한 input 태그를 설명하고 있는지 표시해줘야 합니다. input 태그에 id 속성을 입력하고 label 태그에 for 속성을 입력합니다.

label태그 안의 내용은 input 태그에 자동으로 초점이 맞추어 집니다.

1.3 html5 추가된 type 속성값

속성값	설명
color	색상 선택 양식을 생성합니다.
date	일 선택 양식을 생성합니다.
datetime	날짜 선택 입력 양식을 생성합니다.
datetime-local	지역 날짜 선택 입력 양식을 생성합니다.
email	이메일 입력 양식을 생성합니다.
month	월 선택 입력 양식을 생성합니다.
number	숫자 생성 양식을 생성합니다.
range	범위 선택 입력 양식을 생성합니다.
search	검색어 입력 양식을 생성합니다.
tel	전화번호 선택 입력 양식을 생성합니다.
time	시간 선택 양식을 생성합니다.
url	URL 주소 입력 양식을 생성합니다.
week	주 선택 양식을 생성합니다.

속성

*name 속성

 모든 것에 이 이름(name)속성을 정해줘야함, color, size address, id, password)

*value (가치있는 값) 기본적으로 적혀있는 글자라고도 할 수 있음. (textarea는 그냥 태그 안에 입력하면 됨.)

*placeholder 뒤에 흐린글씨로 나오는 태그이다. (placeholder="id를 입력해주세요")

---

2 input 태그가 아닌 입력양식이 2개 있다. textarea 태그와 select 태그이다.

 

textarea 태그

: 여러줄의 글자를 입력할 수 있는 태그입니다.

안에 미리 글자를 입력하고 싶으면 textarea 태그 안에 글자를 입력한다.

<form action="">

<textarea name="" id="" cols="30" rows="10"></textarea>

</form>

2.1  textarea 태그의 속성

속성값	설명
cols	태그의 너비를 지정합니다.
rows	태그의 높이를 지정합니다.

 

 

select태그

:여러 개의 목록에서 몇가지를 선택할 수 있는 입력 양식 요소입니다.

여러개의 목록을 선택하고 싶을 때는 selct태그의 multiple 속성을 사용하삼 (dropdownlist라고도 부름)

<select multiple="multiple">

<option></option>

</select>

2.2  select 태그

태그이름	설명
select	선택 양식을 생성합니다.
optgroup	옵션을 그룹화합니다.
option	옵션을 생성합니다.

*selct 태그: 데스크탑에서는 안예쁘므로 잘 안씀.