[HTML] 입력 폼

폼

---

태그 <form>

사용자가 입력하는 정보를 하나로 묶어 애플리케이션에 전달 => 실행결과 반환

다양한 입력 양식을 그룹핑 + 전송방법 설정

 

<form name="이름" method="get/post" action="애플리케이션 주소">

name 속성: 폼 요소의 이름

method 속성: 데이터 전송 방법 지정

    get 방식: 전송할 데이터를 URL 주소 뒤에 포함 (간단한 데이터 전송에 편리 / 보안 취약)

    post 방식: 프로그램의 입출력 방식 사용 (데이터 양의 제한 없음)

action 속성: 데이터를  처리할 애플리케이션 주소

---

 

기본 형식 입력

<form> 태그의 하위 태그로 <input>, <textarea>, <select>, <button> 등을 추가

---

태그 <input>

<input type="입력 형식" name="변수명" value="입력값"/>

 

type 속성: 입력 폼의 유형

    텍스트: text, password

    선택: radio, checkbox

    버튼: submit, reset, button, image

    기타: file, hidden

name 속성: 애플리케이션에 전달될 변수명

---

텍스트 입력

 

- 문자열 입력 필드 (한 줄)

<input type="text" name="변수명" value="초기값"/>

 value 속성: 입력 받은 값을 전달 - 입력창 초기 문자

 

- 텍스트 영역 필드 (여러 줄)

<textarea name="이름" cols="열의 수" rows="행의 수"> 텍스트 영역에 표시되는 초기 문장 </textarea>

 표시 영역 보다 많은 텍스트 입력 → 스크롤바 생성

 

- 암호 입력 필드

<input type="password" name="변수명"/>

 보안이 필요한 문자(password 등) 입력 → •으로 표시 (그 이상의 보호 기능은 없음)

---

선택 항목 입력

 

- 라디오 버튼

<input type="radio" name="변수명" value="선택값" checked/> 선택내용

 name 속성값이 같은 그룹에서 value값을 하나만 선택해 전달

 

- 체크박스 선택

<input type="checkbox" name="변수명" value="선택값" checked/> 선택내용

 checkbox에 표시된 모든 value값들이 애플리케이션에 전송

 

- 선택목록에서 선택

<select> 태그 내에 <option> 항목

 

<select name="이름" size(형태)>

    <option value="선택값"> 선택내용 </option>

</select>

 

select 태그의 하위태그로 option태그를 1개 이상 첨부

size 속성: 형태 설정

    size = 1: 드롭다운 형태

    size > 1 : 스크롤 박스 형태

(+)

multiple 속성: 다중 선택 여부

다중 선택 시, <select name="" size"" multiple>

---

버튼 입력

 

- 전송 버튼

<input type="submit" value="버튼라벨"/>

<button type="submit"> 버튼라벨 </button>

 <form>태그의 모든 입력 데이터가 <form>에서 action 속성으로 지정한 애플리케이션으로 전송

 

- 초기화 버튼

<input type="reset" value="버튼라벨"/>

 

-일반 버튼

<input type="button" value="버튼라벨"/>

 

-이미지 버튼

<input type="image" src="이미지 파일" alt="대체문자열"/>

---

- 파일 선택

<input type="file"/>

 

- 데이터 숨기기

<input type="hidden" name="변수명" value="값"/>

 시스템에서 특정 데이터를 처리하고 싶을 때

 

- 텍스트 라벨

<label for="입력 아이디">

 특정 입력 필드(입력 아이디)에 연결

 데이터 전달에 영향은 없음

---

입력 필드 그룹핑

태그 <fieldset>

폼 양식을 그룹핑하는 범위 지정

 

입력 필드의 그룹 주위에 테두리 선을 그려 사용자의 시각적 편의 제공

<fieldset name="이름" form="폼" disasbled> 그룹 </fieldset>

 

속성들은 필수X(optional)

name 속성: 그룹의 이름

form 속성: 폼과 연결

disabled 속성: 그룹 내의 하위 입력 태그들(요소들) 비활성화

 

태그 <legend>

 

그룹의 제목 라벨; <fieldset> 태그의 첫 번째 자식 태그로 한 번만 사용

<legend> 그룹제목 </legend>

---

추가 입력 형식

<input> 태그에 추가된 입력형식 + <input>이외에 추가된 입력 요소: <datalist>

---

서식이 있는 텍스트 입력

 

- 이메일 주소 입력

<input type="email"/>

이메일 주소의 형식이 ***@***.***에 맞게 작성되었는지 확인

(+)

multiple 속성: 여러 개의 요소들을 ','(콤마)로 구분 ex. <input type="email" multiple/>

 

- URL 주소 입력

<input type="url" value="http://"/>

인터넷 주소 표기 방식이 http:// 형식에 맞게 입력되었는지 확인

value 속성: "http://"를 지정해 입력창에 미리 표시

 

- 전화번호 입력

<input type="tel"/>

(+)

pattern 속성: 원하는 패턴을 지정 - 정규식에 따라 패턴을 지정

placeholder 속성: 입력할 자리수 표시

 

- 검색창 입력

<input type="search"/>

---

날짜와 시간 입력

 

- 날짜(일, 월, 주) 입력

<input type="date"/> 연-월-일

<input type="month"/> 연-월

<input type="week"/> 연-주

(+)

min 속성, max 속성: 최소, 최대 값 지정

value 속성: 

 

- 시간 입력

<input type="time"/>                 #위/아래() 버튼으로 시간 조정

<input type="datetime"/>          #UTC 국제 표준 시간대

<input type="datetime-local"/>  #현지 시간

---

색상 및 숫자 입력

 

- 색상 입력

<input type="color"/>

 

- 숫자 입력

<input type="number"/>

화살표를 이용해 값을 지정하게 하는 입력 방식

(+)

min, max 속성

value 속성: 초기 표시 숫자

step 속성: 숫자 간격 지정

 

- 범위 입력

<input type="range"/>

스크롤바를 이용해 값을 지정하게 하는 입력 방식

(+)

min 속성, max 속성

step 속성

---

데이터 리스트에서 선택

 

- 데이터 목록

<input type="" size="" list="데이터리스트 id(이름)">

<datalist id="데이터 리스트 id(이름)"> 옵션들 </datalist>