입력양식 (form)

입력양식 (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에서의 식별자" />

종류에 지정 가능한 값

<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="button">
<input type="submit">
<input type="reset">
<input type="image">
<input type="email">
<input type="tel">
<input type="url">
<input type="number">
<input type="range">
<input type="search">
<input type="date">
<input type="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> 태그에 대해서...

(표 컬러 코드 = #b3f2df)

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

버튼요소의 다른 형태

<input type="button|submit|reset" value="click me" />
 
위의 코드는 래와 같이 변경 가능함.
 
<button type="button|submit|reset">Click me</button>