[html,css] <form> 요소 정리

<form> 요소는 사용자로부터 정보를 입력받을 때 사용하는 매우 유용한 양식이다.

이번 포스팅에서는 <form> 요소의 다양한 속성과 활용에 대해 정리해 보려고 한다.

​

(전에 포스팅 했던 <form>요소를 사용한 실습 예제 '식당 예약 페이지 만들기'를 참고하면 좋을 듯 하다!)

​

​

​

<<form> 요소 주요 속성>

- <form name = "" method = "" action = "">

> name : form 요소 이름

> method : 데이터 전송 방식 지정 (get : 데이터를 url 주소 뒤에 포함 , post: 프로그램 입출력 방식)

> action : 데이터 처리를 위한 애플리케이션 주소

​

​

​

<입력 폼>

- <input type= "입력 형식" name = "" value = "" /> --(단독 태그)

> type 속성 : text, password, radio, checkbox, submit, reset, button, image

> name : 변수명

> value : 사용자 입력 값

 

1) 텍스트 입력 (한 줄)

<input type= "text" name = "" value = "" />

> value 값 : 입력 받은 값 전달 (입력 창 초기 문자 지정)

​

2) 텍스트 입력 (여러 줄)

<textarea name = "" cols = "열 수 " rows = "행 수 " >

초기 문장

</textarea>

* 영역 지정, 텍스트가 영역을 벗어나면 스크롤바 생성.

​

3) 암호 입력

<input type= "password" name = "" />

> 보안 기능, 화면에 입력 값 노출 x,

​

4) 선택 항목 - radio

<input type= "radio" name = "" value = "" checked />

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

> checked : 기본 값 선택

​

5) 선택 항목 - checkbox

<input type= "checkbox" name = "" value = "" checked />

> name 속성값이 같은 그룹에서 선택된 모든 value 값들을 전달

​

6) 버튼 입력 - submit

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

> 모든 입력 데이터가 action 속성에서 지정한 곳으로 전송 (서버, 애플리케이션 프로그램)

​

7) 버튼 입력 - reset

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

> 입력 내용을 초기화

​

8) 버튼 입력 - button

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

> 일반 버튼으로 다양한 용도

​

9) 버튼 입력 - image

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

> 버튼을 이미지로

​

​

* <button> 버튼라벨 </button> 요소

> <input> 요소와 비슷하게 버튼 생성 가능. (오동작 가능성)

​

10) 파일 선택

<input type= "file" name = ""/>

> 파일 업로드 시 사용 - [파일 선택] 버튼 생성

​

11) 데이터 숨김

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

> 특정 데이터 처리 시 사용

​

​

​

​

<텍스트 라벨>

- <label for = "입력 아이디> : 특정 입력 필드에 연결

​

​

​

<그룹 지정>

- <fieldset> 요소 : 폼 양식 그룹 범위 지정 ( 입력 필드 그룹 주위에 테두리)

* disabled를 지정하면 전부 비활성화.

​

- <legend> : 그룹 제목 라벨. <fieldset> 요소에 포함되는 첫 자식 요소. 한번만 사용 가능, 테두리 선 중간에 표시

​

​

<서식 텍스트 입력>

1) 이메일 주소 입력 : <input type = "email"/>

> 이메일 주소 형식 확인

> multiple 속성 : 여러개의 이메일 주소를 입력 받을 수 있음, ', '로 구분

​

2) URL 주소 입력 : <input type = "url"/>

> 인터넷 주소 형식 확인

​

3) 전화번호 입력 : <input type = "tel"/>

> pattern 속성 : 전화번호 패턴을 지정 --> 정규 표현식 사용 ( *이전 포스팅(식당 예약 페이지) 참고)

> placeholder 속성 : 입력 자리수를 화면에 표시

​

4) 검색창 입력 : <input type = "serach"/>

> 검색어 입력 시 취소 표시가 생김

​

5) 날짜 입력

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

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

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

* min, max, value 속성 지정 가능 --> "연-월-일" 형식으로 날짜 입력

​

6) 시간 입력

- <input type = "time"/> : 위 아래 버튼으로 시간 지정 가능

- <input type = "datetime-local"/> : 현지 현재 시간 표현

​

7) 색 입력 : <input type = "color"/>

​

8) 숫자 입력 : <input type = "number"/>

* min, max, value, step 속성

​

9) 범위 입력 : <input type = "range"/>

* min, max, step 속성

​

​

​

<데이터 목록>

- <datalist> : input 요소의 list 속성에 id 지정

> 입력 창에 포커스가 들어오면 옵션 목록이 보여짐

> 검색어 자동완성 기능 구현 가능

​

ex) 색 <input type = "text" list = "color"/>

<datalist id = "color">

<option value = "파랑색"/>

<option value = "빨강색"/>

<option value = "노랑색"/>

<option value = "검정색"/>

</datalist>

​