Web - Front end 5. 웹 폼

 Web - Front end 5. 웹 폼

* 웹 폼

웹 페이지를 통해서 사용자 입력을 받는 폼

웹 폼을 만들기 위한 태그들(ex - <input>, <textarea>, <select> 등)을 폼 요소 라고 한다.

로그인, 등록, 검색, 예약, 쇼핑 등의 다양한 웹서비스에서 사용자 입력을 받기 위해 사용

1) <form>

폼 요소들을 담는 태그

입력된 값들을 그룹으로 묶어주는 역할이며 필요에 따라 여러게를 사용할 수도 있다.

* 속성

name : 폼의 이름을 지정. 값을 처리할 내용의 그룹들을 구분하는데 사용. Javascript에서 사용

action : 폼 데이터를 처리할 웹 서버 응용프로그램 지정. submit 버튼이 눌리면 지정된 웹 서버에 연결해서 웹 서버 응용프로그램을 실행하고 폼 데이터를 전달.

method : 웹 서버로 전송되는 형식을 지시. (대표적인 방법 : get - 주소 입력창에 폼 데이터 출력 / post - 주소 입력창에 폼 데이터를 띄우지 않음)

enctype : 데이터의 인코딩 타입. 폼 데이터을 웹 서버로 전송할 때 암호화 방식 지정

target : 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML문서나 이미지)를 출력할 윈도우 지정 

* 폼 요소의 종류

2) 텍스트 입력 <input type="text | password"> , <textarea>

<input type="text"> : 한 줄 텍스트를 입력 받음

<input type="password"> : 특별히 암호를 입력받음. *으로 화면에 표시

* 속성

name : 요소의 이름 (or id)

maxlength : 입력할 수 있는 문자의 최대 개수

size : 입력 가능한 너비

value : 초기 택스트. 지워야 지워짐

placeholder : 입력하면 바로 지워지는 초기 텍스트. 입력할 정보의 형식을 살짝 보여주는 용도로 주로 사용.

list : 연결할 리스트 선택(<datalist> 와 연동해서 사용)

<textarea> : 여러줄의 텍스트를 입력받음

* 속성

cols : 열 개수

rows : 행 개수 

name : 요소 이름

wrap : 자동 줄바꿈 처리 지정(off, hard, soft). 보통 default값으로 둠

<textarea></textarea> 사이에 초기 줄력값 입력

<body>

<h2>자소서 입력</h2>

<hr>

<form name="frm" method="get">

아이디 : <input type="text" name="id" placeholder="id 압력"

size="20"><br><br>

비밀번호 : <input type="password" name="pw" maxlength="4">

<br><br>

자소서 : <textarea name="introduction" cols="20" rows="5">

여기에 자소서 입력</textarea>

</form>

</body>

 

3) 데이터 목록을 가진 텍스트 입력 창 <datalist>

값을 입력 받을 수도 있고 리스트에서 선택할 수도 있다.

id 속성을 <input>태그의 type속성을 'text'로 하고 list와 연결시킨다. 

<datalist> 안에 <option>태그로 데이터 항목 들을 나타낸다.

(<option> 태그의 value 속성에 항목 입력)

<body>

<h2>프론트 엔드 언어</h2>

<hr>

<form name="frm" method="get">

프론트 엔드 언어 선택 <input type="text" list="front">

<datalist id="front">

<option value="HTML5"></option>

<option value="CSS3"></option>

<option value="Javascript"></option>

</datalist>

</form>

</body>

4) 텍스트 / 이미지 버튼 만들기

<input> 나 <button> 태그로 만들 수 있음

<button></button> 사이에 버튼에 출력할 문자열이나 이미지 입력

* 속성

type : 버튼의 종류

name : 버튼 이름

value  : 버튼에 표시될 문자열

src : type 속성이 image 일때만 사용. 이미지 URL

* type 종류 : button, reset, submit, image(<input> 태그에만 있음)

button : 아무 기능 없는 버튼. Javascript 코드에 사용

submit : 폼 데이터를 웹 서버에 전송

reset : 폼에 입력된 내용을 모두 지우고 초기화

image : src 속성에 URL 지정해서 이미지 띄움. 아무 기능 없으며 button과 같음. <button> 태그를 이용하면 type 속성을 지정해서 reset이나 submit 기능을 가진 이미지 버튼을 만들 수 있음 

<body>

<h2>다양한 버튼</h2>

<hr>

<form name="frm" method="get">

검색 <input type="text" size="15">

<input type="button" value="Q1">

<button type="button">Q2</button><br>

submit 버튼 <input type="submit" value="전송1">

<button type="submit">전송2</button><br>

reset 버튼 <input type="reset" value="리셋1">

<button type="reset">리셋2</button><br>

이미지 버튼 <input type="image" src="media/html.png" width="50">

<button type="button">

<img src="media/html.png" width="50">

</button>

</form>

</body>

5) 다중 선택 체크박스 <input type="checkbox">

여러개 선택 가능

사각형 체크박스 출력

* 속성

name : 요소 이름

value : 전달값

checked : 초기에 선택 상태로 출력

<body>

<h2>좋아하는 음식 선택</h2>

<hr>

<form name="frm" method="get">

삼겹살 <input type="checkbox" value="1" checked>

김치찌개 <input type="checkbox" value="2">

곱창 <input type="checkbox" value="3">

</form>

</body>

6) 라디오 버튼 <input type="radio">

같은 name 속성 안에서 하나만 선택 가능하다.

name 속성이 다르면 독립된 그룹으로 인식해서 여러개 선택할 수 있게 되니 주의해야 한다.

원형 라디오버튼 출력

* 속성

체크박스와 동일

<body>

<h2>좋아하는 음식 선택</h2>

<hr>

<form name="frm" method="get">

삼겹살 <input type="radio" name="food" value="1" checked>

김치찌개 <input type="radio" name="food" value="2">

곱창 <input type="radio" name="food" vlaue="3">

</form>

</body>

7) 콤보박스 <select>

드롭다운 리스트에 목록 출력

목록을 선택하는 입력방식

<select> 태그로 콤보박스 전체를 표현하고 <option> 태그로 항목을 하나하나 표현한다. 

* 속성 - <select>

name : 요소 이름

size : 콤보박스 창 크기(보일 수 있는 최대 항목 개수). 기본값은 1.

multiple : 다중 선택 가능

* 속성 - <option>

selected : 초기에 선택 상태로 출력

value : 전달값

<body>

<h2>좋아하는 음식 선택</h2>

<hr>

<form name="frm" method="get">

<select name="food">

<option value="1">삼겹살</option>

<option value="2" selected>김치찌개</option>

<option value="3">곱창</option>

</select>

</form>

</body>

8) 폼 요소 캡션 만들기 <label>

캡션은 입력을 받을때 입력 받을 항목의 이름을 말한다. 이전의 코드들 에서는 캡션은 그냥 텍스트로만 표시되었다. 이때 캡션과 폼 요소를 <label> 로 묶어주면 문서를 명료하게 표현할 수 있고 한 단위로 다룰 수 있다. 

<label>로 묶으면 캡션을 클릭하면 입력창에 입력가능하게 되거나 선택형 요소의 경우에는 선택이 된다. 

- <label>로 감싸는 방법 두 가지

(1) : <label>로 폼 요소 감싸기

캡션과 폼 요소를 <label></label> 사이에 넣는다. 

(2) : 폼 요소에 ID속성을 지정하고 <label>의 for 속성에 해당 ID를 입력한다. 그리고 캡션을 <label></label> 사이에 넣는다. 

<body>

<h2>로그인</h2>

<hr>

<form name="frm" method="get">

<label>

ID : <input type="text" size="15" value="">

</label><br>

<label for="password">PW : </label>

<input id="password" type="password" size="15" value="">

<br><hr>

<h2>언어 선택</h2>

<hr>

<label>

<img src="media/html.png" width="50">

<input type="radio" name="coding" value="1" checked>

</label><br>

<label for="CSS">

<img src="media/css.png" width="50">

</label>

<input id="CSS" type="radio" name="coding" value="2">

</form>

</body>

8) 색 입력 <input type="color">

컬러 다이얼로그를 출력해서 색을 입력받는다.

* 속성

value : 초기값

onchange : 값이 변경되었을 때 실행할 Javascript코드 입력

<body>

<h2>색 입력</h2>

<hr>

<form name="frm" method="get">

<input type="color" value="#ff00ff"

onchange="document.body.style.color=this.value">

</form>

</body>

(onchange속성의 Javascript코드는 해당페이지의 value값을 body의 색상에 적용해주는 코드다.)

9) 시간 정보 입력<input type="month | date | time | date time-local"

달, 주, 날짜, 시간을 쉽게 입력받을 수 있는 폼 요소다.

달력버튼을 클릭하면 달력이 펼쳐지고 원하는 날짜나 시간을 선택할 수 있다. 

HTML5를 완벽하게 지원하지 않는 브라우저에서는 텍스트 창에 value값만 출력한다.

(사파리에서는 지원 안됨)

* 속성

value : 초기값

<body>

<h2>시간 정보 입력</h2>

<hr>

<form name="frm" method="get">

month : <input type="month" value="2022-04"><br>

week : <input type="week" value="2022-w013"><br>

date : <input type="date" value="2022-04-03"><br>

time : <input type="time" value="17:30"><br>

local : <input type="datetime-local"

value="2022-04-03T17:30:15.24">

</form>

</body>

10) 스핀버튼과 슬라이드바 < input type="number">, <input type="range">

스핀버튼은 정교한 값, 슬라이드바는 대략적인 값을 입력할 때 사용

슬라이드바의 경우 <datalist>태그와 연결하면 슬라이드바 아래에 점을 찍어서 지점을 나눠줄 수 있다.

*속성

min : 최소값

max : 최대값

step : 증감 단위 값

value : 입력한 숫자 저장

<body>

<h2>지속 시간과 온도 설정</h2>

<hr>

<form name="frm" method="get">

지속 시간 (0.0~1.0 시간) :

<input type="number" min="0.0" max="10.0" step="0.5"><br><br>

온도 설정 : 10&deg;

<input type="range" min="10" max="30"

list="temp"> 30&deg;

<datalist id="temp">

<option value="12" label="Low">

<option value="20" label="Medium">

<option value="28" label="High">

</datalist>

</form>

</body>

11) 형식을 가진 텍스트 입력

HTML5에서는 email주소, URL, 전화번호 등 텍스트가 특정 형식에 맞게 입력 되었는지 검사하는 폼 요소를 제공한다. 

<input type="email"> , <input type="url">, <input type="tel"> , <input type="search">

w3c규정에 맞도록 입력 되었는지 검사하고 잘못 입력되면 에러 메세지를 출력한다.

placeholder 속성을 이용하여 해당 형식을 미리 보여주는 것이 권장된다.

전화번호는 형식이 다양해서 유효성 검사를 진행하지 않는다. 

<input type="search">는 유효성 검사는 하지 않고 입력창의 오른쪽 끝에 x가 표시되며 클릭하면 입력이 취소된다.  

<body>

<h2>회원 정보 입력</h2>

<hr>

<form name="frm" method="get">

email : <input type="email" placeholder="id@host.com"><br><br>

홈페이지 : <input type="url" placeholder="http://"><br><br>

전화번호 : <input type="tel" placeholder="010-1234-5678">

<input type="submit" value="확인">

<br><br>

<hr>

검색어 : <input type="search" placeholder="검색어">

<button type="button">검색</button>

</form>

</body>

12)  폼 요소 그룹핑 하기 <fieldset>

<fieldset>태그로 폼 요소들을 묶으면 그룹을 둘러싸는 외곽선 박스와 제목을 출력한다. 

<legend>태그로 그룹의 제목을 표시할 수 있다. 

(사파리에서는 지원 안함)

<body>

<h2>회원 정보 입력</h2>

<hr>

<form name="frm" method="get">

<fieldset>

<legend>회원 정보</legend>

email : <input type="email" placeholder="id@host.com"><br><br>

홈페이지 : <input type="url" placeholder="http://"><br><br>

전화번호 : <input type="tel" placeholder="010-1234-5678">

<input type="submit" value="확인">

</fieldset>

<br><br>

<hr>

검색어 : <input type="search" placeholder="검색어">

<button type="button">검색</button>

</form>

</body>