10. 폼 구성하기

- 폼(form): 정보를 입력 받아서 서버로 전송하기 위한 양식 ex) 아이디창, 체크창, 로그인 버트 기타등등

1. form 태그

-폼 양식을 의미

-폼을 구성하는 태그는 다 이 안에 넣어야 함

<!--형식-->
<form action="서버 url" method="get 또는 post"></form>

action 속성

• 입력 받은 값을 전송할 서버의 URL 주소

method 속성

• 서버에 전송할 때 송신 방식 결정
• 보안이 요구되면 post 아니면 get

2. input 태그

-뭔가를 입력 받을 때 사용 ex) 아이디 비번 

<!--형식-->
<input type="종류" name="이름" value="초깃값">

-type 속성은 필수 name, value 속성은 선택

type 속성

• 상호작용할 요소를 결정함

속성값	설명	속성값	설명
text	한 줄 텍스트 입력 요소 생성	file	파일 업로드 요소 생성
password	비밀번호 입력 요소 생성	button	버튼 요소 생성
tel	전화번호 형식 입력 요소 생성	image	이미지로 버튼 요소 생성 src 속성 사용해야함 alt 속성은 안 씀
number	숫자만 입력가능 요쇼 생성	hidden	사용자 눈에는 안보이는 입력 요소
url	url 입력 가능 요소 생성	date	날짜(연,월,일) 선택 요소 생성
search	검색용 텍스트 요소 생성	datetime-local	사용자 시간대에 맞는 날짜(연,월,일,시,분)를 선택 요소 생성
email	이메일 형식 입력 요소 생성	month	날짜(연,월) 선택 요소 생성
checkbox	체크박스 요소 생성	week	날짜(연,주차) 선택 요소 생성
radio	라디오버튼 요소 생성	time	시간 선택하는 요소 생성
range	숫자 범위 선택가능한 슬라이드 요소 생성	submit	값 전송하는 버튼 생성
color	색상 선택 요소 생성	reset	입력 값 초기화 버튼 생성

name 속성

• 입력 요소의 이름 결정
• 입력 요소가  form태그를 통해 서버로 전송될때 서버에 저장되는 이름(식별위해 필요)

value 속성

•  입력요소 초깃값을 설정

3. label 태그

-form 태그 안 상호작용 요소의 이름을 정해줌

-스크린 리더기(시각 장애인 웹 탐색 도구)가 label 태그로 연결된 상호작용을 쉽게 식별하므로 필수로 사용을 권장

-명시적인 방법과 암묵적인 방법으로 나뉨

1) 암묵적인 방법 : label 태그에 상호작용 요소를 포함시키는 방법

<label>
	아이디
    <input type="text">
</label>

 

2) 명시적인 방법 : label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 방법

<label for="userpw">비밀번호</label>
<input type="password" id="userpw">

 

3) 둘 다 동시에 사용

<label for="userpw">
	비밀번호
    <input type="password" id="userpw">
</label>

4. fieldset, legend 태그

-fieldset 태그 : form 태그 안 상호작용 요소를 그룹 지음

- legend 태그 : 그룹의 이름을 붙임

<!--형식-->
<form action="#">
	<fieldset>
    	<legend>그룹 이름</legend>
        <!--상호작용 요소 생략-->
    </fieldset>
</form>

5. textarea 태그

- 여러 줄짜리면 input 태그 대신 이걸 사용

- 웹사이트에서 글을 쓸 때 보통 이걸 씀

<!--형식-->
<textarea>초깃값</textarea>

6. select,option,optgroup 태그

<!--형식-->
<select>
	<optgroup label="그룹 이름">
    	<option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
    </optgroup>
</select>

-select 태그

• 콤보박스 생성
• size 속성 : 콤보박스에서 화면에 몇개 뜨는지 지정, 기본은 1개
• multiple 속성: 기본은 1개만 선택이지만, multiple 쓰면 여러개 선택 가능

-option 태그

• 콤보박스에 항목 추가
• value 속성으로 서버에 전송할 값 지정, 없으면 option 태그 안에 적은 텍스트가 전송됨
• selected 속성 : 원래는 콤보박스에 첫번쩨 option 태그가 기본 선택된 상태, 이걸 붙이면 그게 기본 선택

-optgroup 태그

• 항목들을 그룹으로 묶을때
• 반드시 label속성으로 그룹명 지정해야 함

7. button 태그

-input 태그에서 버튼 만들 수도 있지만 button 태그로도 가능

<!--형식-->
<button type="종류">버튼 내용</button>

<!--예시-->
<button type="submit">
	<img src="twitter.png" alt="트위터로 공유">
    트위터로 공유하기
</button>

-type 속성값은 서버 전송용이면 submit, 초기화면 reset, 그냥 버튼이면 button

8. 폼 관련 태그의 공통 속성

disabled 속성 

• 상호작용 요소를 비활성화
• input , textarea,select button 태그에 사용가능

<!--형식-->
<input type="text" disabled>

-위 형식의 경우 텍스트창에 입력이 안됨

readonly 속성 

• 읽기전용으로 변경, 입력은 되는데 선택이나 복사가 안 됨
• textarea 태그와 input 태그(속성값이 text,search,url,tel,email,password,date,month,week,time,datetime-local,number)에서 사용 가능

<!--형식-->
<태그 readonly>

 

maxlength 속성

• 입력할 수 있는 글자 수를 제한함
• textarea 태그와 input 태그(속성값이 text,search,url,tel,email,password,date,month,week,time,datetime-local,number)에서 사용 가능

<!--태그-->
<태그 maxlength="숫자">

 

checked 속성

• 선택 요소를 체크된 상태로 표시
• input태그의 type="checkbox" 아니면 type="radio"만 사용가능
•  

<!--형식-->
<태그 checked>

 

placeholder 속성

• 입력에 뭘 입력하면 되는지 적는 용도로 사용
•  

<!--형식-->
<input placeholder="입력값에 대한 힌트">