입력양식(form)

HTML+CSS 03일차 요점 정리

---

입력양식(form)

---

입력양식의 영역 지정

<form  [method="get/post"] [action="backend=url"

     [enctype="multipart/form=data"]>

</form>

속성 설명

• method : 입력값을 백엔드 페이지에게 전송하는 방식

• action : 입력값을 전송받을 백엔드 페이지의 주소

• enctype: 파잎 업로드가 요구될 경우 명시

-화면 UI를 구성하는 과정에서는 중요하지 않기 때문에 method, action, enctype 속성은 명시하지 않는 경우가 많다.

입력양식 안에서의 그룹 지정 (필요한 경우만 수행)

<fieldset>                             <--- 그룹의 영역 지정

<legend> 제목 </legend> <--- 그룹의 제목을 표현

... 입력 항목들을 표현 ...

</fieldset>

입력항목

기본

<input type="종류" name="백엔드에서의 식별자" id="CSS. JS에서의 식별자/>

종류에 지정 가능한 값

text, password. checkbox, radio,button, submit, reset, image, email, tel. url. number,range, search, date, time

<input> 태그에 추가 가능한 속성

속성명	설명
value="기본값"	페이지가 열릴 때 입력되어 있을 값
checked	type속성이 radio, checkbox 인 겨우 사용
min"최소값"	type속성이 number, range인 경우 사용
max="최대값"	type속성이 number, range인 경우 사용
step="숫자"	type속성이 number, range인 경우 사용
maxlength="숫자"	키보드로 입력하는 형태에서 최대 글자수
src="이미지 경로"	image 형태인 경우만 사용
required	필수 입력 항목 지정(모든 브라우저가 지원하는 것은 아님

그 밖의 요소

장문 입력

<textarea name="식별자" id="식별자" [maxlength="숫자"> 내용</textarea>

드롭다운

<select name="식별자" id="식별자 [multiple]>

<option value="값" selected>화면표시내용</option>

</select>

버튼

- <input> 태그에 대해서...

종류	설명
type="button"	이 자체로는 아무기능이 없음. 동작할 내용을 JS로 구현
type="submit"	입력한 내용을 백엔드에 전송하는 기능(일반적인 저장버튼)
type="reset"	입력한 내용을 모두 초기화
type="image"	submit과 기능이 동일 X

버튼요소의 다른 형태

<input type"thbbon|submit|reset="<value=
Click me"/>

위 의 코드는 아래와 같이 변경

<button type="buttone|submt|reset">Click me</button>