웹페이지를 통해 사용자 입력을 받는 폼을 웹 폼 혹은 폼이라고 한다. 폼은 다양한 형태와 이에 따른 태그들이 있으며, 이를 폼 요소 라고 한다.
다음은 폼을 만드는 간단한 예시이다.
<body>
<h3>로그인 폼</h3>
<form name="frm" method="" action="">
ID : <input type="text" size="15" name="id"></form><br>
PW : <input type="password" size="15" name="pwd"></form><br>
<input type="submit" value="로그인" onclick="check()">
</form>
</body>
폼 태그는 <form name=value method=value action=value>의 형태이다.
name 속성은 폼의 이름을 설정하며, 이 이름은 자바스크립트를 할 때 이용된다.
method 속성은 웹서버로 전송하는 형식을 지시하며, get과 post방식이 있다. get 방식은 url에 입력값을 포함하며, 주로 검색이나 글을 읽을 때 사용되고, post 방식은 url에 입력값이 포함되지 않으며 글을 쓰거나 수정할 때 주로 이용된다.
action 속성은 폼 데이터를 처리할 웹 서버 응용프로그램을 지정한다.
폼 요소는 <input type=value value=value>로 이루어진다.
type에는 입력받을 값의 형식을 지정하며, 지정하지 않으면 text의 형식으로 지정된다. password, checkbox 등 다양한 형태가 있다.
value는 폼 내부에 넣을 값을 지정한다. 예를 들어 ID를 지정하는 폼엔 value를 지정하지 않아, 값을 입력하는 위치에 아무런 텍스트가 없지만, submit 폼의 경우에는 value에 로그인이라는 값을 지정하였기 때문에, submit 버튼 내에 '로그인' 이라는 텍스트가 들어갔다.
사용자 입력을 받는 대표적인 곳, 검색을 예시로 들면, '고양이' 라는 검색어로 입력을 하면
다음과 같이 url에 내가 입력한 사용자 입력값의 이름이 나오게 된다. 앞에 있는 /search는 각 회사가 가지고 있는 검색엔진의 응용프로그램이다.
이를 응용해서 3개의 검색엔진에서 검색을 할 수 있는 홈페이지를 만들어보자.
<h3>네이버 검색하기</h3>
<form method="get" action="https://search.naver.com/search.naver">
검색어<input name="query">
<input type="submit" value="검색">
</form><hr>
<h3>구글 검색하기</h3>
<form method="get" action="https://www.google.com/search">
검색어<input name="q">
<input type="submit" value="검색">
</form><hr>
<h3>다음 검색하기</h3>
<form method="get" action="https://search.daum.net/search">
검색어<input name="q">
<input type="submit" value="검색">
(url에 값이 나타나므로 method는 get방식을 이용하였다.)
(실행)
검색하는 사이트에서 사용자 입력값을 받는 input name만 알 수 있으면 url에서 직접 값을 바꿔 넣는 방법을 사용할 수 있다.
-폼 태그의 종류
폼 태그의 종류는 많은 것이 있다.
- text : 한 줄 텍스트 입력 창
- password : 암호 입력 한 줄 창
- button : 버튼(단순)
- submit : 웹 서버로 폼 데이터를 전송시키는 버튼
- reset : 입력된 폼 데이터를 초기화 시키는 버튼
- image : 이미지 버튼
- checkbox | radio : 다중 체크 & 하나만 선택 체크
- select : 드롭다운 리스트를 가진 선택박스
- month | week | date | time | datatime-local : 월, 주, 일, 시간, 지역 시간을 입력하는 창
- number | range : 스핀버튼과 슬라이드 바가 있는 숫자입력 창
- color : 색 선택 창
- email | url | tel | search : 이메일, url, 전화번호, 검색 키워드를 가진 텍스트 창
- file : 로컬 컴퓨터의 파일 선택 창
- textarea : 여러줄의 텍스트 입력 창
몇개의 태그를 예시로 만들어보면,
*textarea 태그
<textarea cols="50" rows="5">
</textarea>
의 경우, 다음과 같이 텍스트 입력을 받는 입력창이 만들어진다.
이 창은 사용자가 크기를 자유롭게 조정할 수 있다.
속성 중 cols와 row는 초기 크기를 설정하는 속성이며, style=value 중, value 값에 resize=none;를 대입하면 더이상 사용자의 임의대로 창을 조절할 수 없게 된다. <textarea> 사이에 value값을 집어넣으면 그 값이 textarea내에서 출력된다(사용자가 지울 수 있음)
<textarea cols="50" rows="5" style="resize:none;">
폼에 들어가는 value 영역
</textarea>
*list 태그
<input list="country">
<datalist id="country">
<option>대한민국</option>
<option>중국</option>
<option>일본</option>
</datalist>
value 값에 지정된 datalist의 id를 대입하고, 그 datalist를 드롭다운 형태로 나타내는 태그이다.
이 때 value 값과 datalist의 id가 같아야 드롭다운에 리스트가 생성된다.
*checkbox 태그와 radio 태그
다음은 checkbox 태그이다.
짜장면 <input type="checkbox" value="1" name="china">
짬뽕 <input type="checkbox" value="2" name="china" checked>
깐풍기 <input type="checkbox" value="3" name="china">
이 때 checked 속성이 있으면 출력 시 미리 체크 되어 있는 상태로 출력된다
다음이 raido 태그이다
짜장면 <input type="radio" value="1" name="china1">
짬뽕 <input type="radio" value="2" name="china1" checked>
깐풍기 <input type="radio" value="3" name="china1">
마찬가지로 checked 속성이 있으면 미리 체크되어 출력된다.
checkbox와 radio 속성의 가장 큰 차이는 다중체크 여부이다 checkbox는 다중체크가 가능하지만 radio는 다중체크가 불가능하다.
서버로 값이 전송될 때는 '짜장면','깐풍기' 등 앞에 지칭한 텍스트가 아닌, 태그 내부의 value 값이 서버로 전송된다.
*color 태그
<input type="color" value="#fcfefd">
왼쪽과 같이 컬러 선택 창이 나타나고, 누르면 팔레트가 나타난다.
기본 지정 색은 검은색(#000000)이고, value 값을 지정해 초기값을 설정할 수 있다.
*다양한 시간, 날짜 요소 태그
<h3>form에 사용된 시간과 날짜 요소</h3>
<form method="GET">
month : <input type="month"><br>
week : <input type="week"><br>
date : <input type="date"><br>
time : <input type="time"><br>
local : <input type="datetime-local"><br>
다음과 같이 폼이 나타나고, 클릭하면 선택할 수 있는 날짜가 달력 등으로 나타난다.
*다양한 숫자 표시 태그
<h3>숫자를 입력</h3>
<form>
<p>지속시간 : <input type="number" min="0.0" max="10" step="0.5"></p>
<p>온도 : <input type="range" min=10 max=30 list="temp">
<datalist id = "temp">
<option value="12" label="low"></option>
<option value="20" label="middle"></option>
<option value="26" label="highN"></option>
</datalist></p>
</form>
number은 숫자를 고를 수 있게 하는 태그이다. 입력한 속성 값이 없다면, 값의 제한 없이 1의 차이로 값이 오르내릴 수 있다. min은 최소값을, max는 최대값을, step는 한 번당 오르내릴 수 있는 값의 양을 정하는 속성이다.
range는 숫자를 bar의 형태로 출력해주는 도구이다. 기본적으로는 min과 max를 속성값을 정하고, list가 태그 내에 포함되는 경우 다음과 같이 bar위에 해당되는 값이 실선으로 만들어진다.
'HTML+CSS+Javascript > html' 카테고리의 다른 글
| 5. 미디어 삽입 (0) | 2020.03.04 |
|---|---|
| 4. 인라인 프레임 (0) | 2020.03.03 |
| 3. 하이퍼링크 (0) | 2020.03.03 |
| 2. 고급 문서 만들기 (0) | 2020.03.03 |
| 1. html 기본 문서 만들기 (0) | 2020.03.02 |
