폼은?
아이디, 비밀번호, 로그인 버튼, 회원가입창 등 사용자가 웹사이트로 정보를 보낼 수 있는 요소들은 모두 폼
폼은 어떤 방식으로 동작할까?
로그인 폼 자료 입력 --> 웹서버의 데이터베이스에서 조회 --> 로그인 성공/실패
<form> 태그 폼만들기
<form 속성 = "속성값" > 여러 폼 요소 </form>
| 속성 | 설명 |
| method | 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정 get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남 [256byte~4096byte까지만 가능] post : 사용자의 입력을 표준입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않음. 가장 일반적인 방식 |
| name | 폼의 이름을 지정 |
| action | <form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정 |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 |
| - 자동완성 속성 autocomplete = "on" 또는 "off" |
<form action="search.jsp" method="post" autocomplete="on"> <input type="text" title="검색"> <input type="submit" value="전송"> </form> |
<label 속성="속성값"> - 폼 요소에 레이블 붙이기
레이블이란 입력 창 옆에 "아이디"나 "비밀번호"처럼 붙여 놓은 텍스트
<label> 태그를 사용하면 폼 요소와 레이블 텍스트를 서로 연결시켜 사용
| 형식1 | <label [속성="속성값"] > 레이블 < input ... > </label> |
| 형식2 | <label for="id이름"> 레이블 </label> <input id="id이름" [속성 = "속성값"] > |
라디오 버튼과 체크 박스에서 사용하는 <label> 태그
스마트폰처림 화면이 작은 기기에서 라디오 버튼이나 체크박스 부분을 정확히 터치하는 것이 어려울때 label태그를 이용해 연결해 두면 터치가 훨씬 쉽다.
<style>
ul{
list-style : none;
}
</style>
<form action="post" name = "a1.jsp">
<h3> 수강분야(다수선택 가능)</h3>
<ul>
<li><label><input type = "checkbox" name = "s1" value = "grm"> 문법 </li> </label>
<li><label><input type = "checkbox" name = "s2" value = "wr"> 작문 </li></label>
<li><label><input type = "checkbox" name = "s3" value = "rd"> 독해 </li></label>
</ul>
<h3> 수강과목(1과목만 선택 가능)</h3>
<ul>
<li><label><input type = "radio" name = "subject" value="eng"> 영어회화 </label></li>
<li><label><input type = "radio" name = "subject" value="jp"> 일어회화 </label></li>
<li><label><input type = "radio" name = "subject" value="ch"> 중국어회화 </label></li>
</ul>
</form>
<fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기
여러 구역으로 나누어 표시하려고 할 때 이용
 <fieldset [속성="속성값"] > <lengend> 개인 정보 </legend> <ul> <li><label for = "name">이름</label><input id="name" type="text"></li> <li><label for = "email">메일주소</label><input id="email" type="email"></li> </ul> </fieldset> |
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>폼 연습하기</title>
<style>
ul{
list-style : none;
}
li {
margin:20px; /*이름란, 메일주소란 사이의 간격*/
}
li label {
width:80px; /*label의 크기 정해줌으로써 인풋태그가 같은 위치에서 시작*/
float:left; /*label을 왼쪽으로 지정해야 지정된 너비를 가지고 인풋태그 왼쪽에 옴*/
}
fieldset {
margin:15px; /*필드셋 사이의 간격*/
}
</style>
</head>
<body>
<form action="post" name = "a1.jsp">
<fieldset>
<legend> 개인 정보</legend> <!--필드의 이름-->
<ul>
<li><label for = "name">이름</label><input id="name" type="text"></li>
<li><label for = "email">메일주소</label><input id="email" type="email"></li>
</ul>
</fieldset>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li><label for = "id">아이디</label> <!-- 로 억지로 맞출수도 있으나, style적용이 효율적-->
<input id = "id" type = "text">
</li>
<li><label for = "pwd">비밀번호</label>
<input id = "pwd" type = "password">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
1. input태그 - 입력항목 만들기
형식
<input type="유형" [속성="속성값"]> cf.[ ]는 생략가능
-id속성 사용
여러번 사용된 폼 요소를 구분하기 위해 사용하는 것
id를 지정해 놓으면 <label>태그를 이용해 캡션을 붙일 수도 있고 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있다.
id속성은 최소한 한개 이상의 문자여야 하고 공백이 있어서는 안된다.
<input type="text" id="user-name" size="10">
<input type="text" id="address" size="60">
2. type 속성
| 유형 | 설명 | 유형 | 설명 |
| hidden | 사용자에게는 보이지 않지만 전송할 때 서버로 함께 넘겨지는 값 | search | 검색 상자 |
| text | 한줄짜리 텍스트를 입력할 수 있는 텍스트 상자 | tel | 전화번호 입력 필드 |
| url | URL 주소를 입력할 수 있는 필드 | 메일 주소를 입력할 수 있는 필드 | |
| password | 비밀번호를 입력할 수 있는 필드 | ||
| datetime | 국제표시(UTC)로 설정한 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) | date | 사용자 지역 기준 날짜(연, 월) |
| datetime-local | 사용자 지역 기준 날짜(연,월,일) | month | 사용자 지역 기준 날짜(연, 월) |
| time | 사용자 지역 기준 시간(시,분,초,분할 초) | week | 사용자 지역 기준 날짜(연, 주) |
| number | 숫자를 조절할 수 있는 슬라이드 막대 |
range | 숫자를 조절할 수 있는 슬라이드 막대 |
| color | 색상 표 | file | 파일을 첨부 버튼 |
| checkbox | 주어진 항목에서 2개 이상 선택 가능한 체크박스 (input의 속성 name 다름 value 다름) |
radio | 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼 (input의 속성 name 같음, value 달라야 함) |
| submit | 서버 전송 버튼 | image | submit 버튼 대신 사용할 이미지 |
| reset | 리셋 버튼 | button | 버튼 |
 maxlength : 실제 입력 가능한 글자 수 |
<form method="POST" autocomplete="on"> <fieldset style="width: 400px;"> <label for ="id"> 아이디</label> <input id="id" type="text" name ="userId" size = 10 maxlength=7> <label for ="pwd"> 비밀번호</label> <input id="pwd" type="password" name ="userPwd" size =10 maxlength=10> <input type="submit" name ="login" value="로그인"> </fieldset> </form> |
 //줄바꿈 위해 라벨을 ul과 li로 감싸줘야함 |
<style> fieldset{ width:500px; } ul{ list-style: none; margin:30px; } li input{ margin-bottom: 10px; } li label{ text-align: right; width: 120px; float: left; margin-right: 1em; } #join{ margin-top:1em; width:528px; } </style> <h1> 회원 가입 </h1> <form method="get"> <fieldset> <legend> 로그인 정보</legend> <ul> <li><label for = "id"> 아이디 </label><input id="id" name="아이디" type="text"></li> <li><label for = "pwd"> 비밀번호 </label><input id="password" name="비밀번호" type="password"></li> <li><label for = "checkPwd"> 비밀번호 확인 </label><input id="checkPwd" name="비밀번호확인" type="password"></li> ...후략 |
 |
li{ list-style: none; padding:5px; } fieldset{ width : 400px; } li label{ width: 150px; float: left; } <form action="a.jsp" method="GET"> <fieldset> <legend>등록정보</legend> <ul> <li><label for="joinNum"> 참여인원 <small>(최대10명)</small></label><input id="joinNum" type="number" step="1" min="1" max="10"></li> <li><label for="item"> 지원물품 <small>(1인당 5개)</small></label><input id="item" type="number" step="1" min="1" max="10"></li> <li><label for="range"> 희망 단계 <small>(하,중,상))</small></label><input id="range" type="range" max="3" min="1" step="1" ></li> |
3. input 태그의 다양한 속성
1) autofocus 속성 - 입력 커서 표시하기
페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시
이전에는 자바스크립트를 이용해야 했지만 지금은 html5에서는 autofocus 지원함
<label class = "reg" for="uname"> 이름 </label>
<input type="text" id="uname" autofocus required>
2) placeholder 속성 - 힌트 표시하기
<label class="reg" for="uid"> 학번 </label>
<input type="text" id="uid" placeholder="하이픈없이 입력">
3) readonly 속성 - 읽기 전용필드 만들기
입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만듦
<label class="reg" for="subj"> 영어회화(초급) </label>
<input type="text" id="subj" value="오전 9:00~11:00" readonly="readonly">
4) required 속성 - 필수 필드 지정하기
내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 함
<label class="reg" for="uname"> 이름 </label>
<input type="text" id="uname" autofocus required>
5) min, max, step 속성
해당 필드의 최소값과 최대값, 증가값 지정
태그 유형이 date, datetime, datetime-local, month, week, time, number, range일 경우에만 사용
<label class="reg" for="group"> 단체 주문 </label>
<input type="number" id="group" value="10" min="10" max="100" step="10">
6) size, minlength, maxlength 속성 - 길이, 최소 길이, 최대 길이 속성
size : 텍스트 필드의 길이 (화면에 보이는 글자 길이, 글자수는 아닌듯)
maxlength : 입력할 수 있는 최대 텍스트 필드의 길이
<label> 아이디 : <input type="text" id="user_id" size="10" minlength="4" maxlength="15"></label>
<small style="color:red;"> 4~15자리 이내의 영문과 숫자 </small>
7) formaction - 실행할 프로그램을 연결
type="submit"이나 type="image"일때 사용 가능
8) formemctype - 서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정
type="submit"이나 type="image"일때 사용가능
9) formmethod - 서버로 폼을 전송하는 방식(post, get)방식등을 지정
이미 <form> 태그 안에서 지정한 방식이 있어도 그 방식은 무시됨
10) formnovalidate
<form> 태그 안에 novalidate 라는 속성이 있어서 서버로 전송할 때 폼 데이터가 유용한지 여부를 표시할 수 있는데
<input> 태그 안에서도 formnovalidate 속성을 이용해 유효성 여부를 표시
11) formatarget
폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타겟을 지정
12) height, width
type="image"일 때 이미지의 너비와 높이를 지정
13) list
<datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여줌
14) multiple
type="email"이나 type="file"일 때 두개 이상의 값을 입력
<input>태그 안에 속성 이름만 표시하면 된다
4. <select>, <optgroup>,<option>태그 - 드롭다운 목록 만들기
형식
<select 속성="속성값">
<option value="값" [속성="속성값"]> 내용1 </option>
<option value="값" [속성="속성값"]> 내용2 </option>
<option value="값" [속성="속성값"]> 내용3 </option>
</select>
1) select 태그의 속성
size - 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정합니다
multiple - 브라우저 화면에 여러개의 옵션이 함께 표시되면서 ctrl키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.
2) option 태그
value - 옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다
selected - 화면에 표시될 대 기본으로 선택되어 있는 옵션을 지정합니다.
실습
실습 - 드롭 다운 항목 그룹으로 묶기
드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶여야 할 경우 <optgroup>태그를 사용할 수 있다.
<optgroup>태그를 사용할 때는 label 속성을 사용해 그룹의 제목을 붙입니다.
3) <optgroup> 태그 - 옵션끼리 묶기
4) <datalist> 태그, <option>태그
형식
<input type = "text" list="데이터 목록 id">
<datalist id="데이터 목록 id">
<option> ~~~ </option>
<option> ~~~ </option>
.....
</datalist>
<select> 태그 대신 <datalist> 태그를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있다.
value - 속성 : 사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정합니다.
label - 속성 : 사용자를 위해 브라우저에 표시할 레이블입니다. 따로 지정하지 않을 경우, value 값을 레이블로 사용합니다.
5) <textarea>태그 - 여러줄 입력하는 텍스트 영역 만들기
기본형식
<textarea [속성="속성값"] > 내용 </textarea>
폼에서 텍스트 항목을 선택하는 것이 아니라 직접 여러 줄의 텍스트를 입력하는 영역을 만들 수 있다.
한줄 이상의 문장을 입력할 때 사용하는 폼
속성
name - 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다
cols - 텍스트 영역의 가로 너비를 문자 단위로 지정
rows - 텍스트 영역의 세로 길이를 줄단위로 지정, 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다
6) <button> 태그 - 버튼 넣기
폼을 전송하거나 리셋하기 위한 버튼을 삽입할 수 있다.
<button type="submit | reset | butto" > 내용 </button>
웹문서의 버튼은 <input>태그를 이용해 삽입할 수 도 있고 <button>태그를 이용해 삽입할 수 도 있다.
두개 모두 비슷한 모습이며 용도도 비슷합니다
<input type="submit" value="전송">
<button type="submit"> 전송 </button> - 차이점 화면낭독기에서 이 부분에는 버튼이 있다는 것 알려줌. 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수 잇고 CSS를 이용해 원하는 형태를 꾸밀 수 있다.
<form>
<button type="submit" class="subm">
<img src = "images/tick.png" alt="" > 전송하기
</button>
</form>
7) <output>태그 - 계산결과
입력하는 값이 계산 결과라는 것을 브라우저에게 알려 줍니다.
<output 속성="속성값"> 내용 </output>
<form oninput="result.value=parseInt(num1.value) + parseInt(num2.value)" >
<input type="number" name = "num1" value="0" >
+ <input type="number" name = "num2" value="0" >
= <output type="result" name = "num" value="0" > </output>
</form>
8) <progress> 태그 - 진행 상태 보여주기
작업진행 상태를 나타낼때 사용함
속성
value - 작업 진행 상태를 나타내며 부동 소수점으로 표현합니다.
이 값은 0보다 크거나 같고 max 값보다 작거나 같아야 합니다.
max - 작업이 완료 되려면 얼마 많은 작업을 해야 하는 지 부동 소수점으로 표현합니다.
실습
<ul>
<li>
<label>10초 남음</label>
<!-- 전체 60초 중 50초 진행 -->
<progress value="50" max="60"> </progress>
</li>
<li>
<label>진행률 30%</label>
<!-- 전체 100 중 30만큼 진행 -->
<progress value="30" max="100"></progress>
</li>
</ul>
9) <meter>태그 - 값을 차지하는 크기 표시
전체 크기중에서 얼마나 차지하는지를 표현할 때 사용
진행된다는 의미의 progress태그와 달리 전체 용량중 몇%를 표시할 때 사용함
즉, 사용량, 전체 유권자 중에서 몇명의 투표했는지를 보여 주는 투표율처럼 지정된 범위 내에서 해당 값이 어느 정도 차지하는 지를 보여 준다.
속성
min, max - 범위의 최소값과 최대값을 나타냅니다. 값을 지정하지 않으면 0과 1로 간주
value - 범위 내에서 차지하는 값을 나타냅니다
low - '이 정도면 낮다' 라고 할 정도의 값을 지정합니다
high - '이정도면 높다'라는 할 정도의 값을 지정합니다
optimum - '이 정도면 적당하다'라고 할 정도의 범위를 지정합니다.
<ul>
<li>
<label>점유율 0.8 </label>
<!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다 -->
<meter value="0.8"></meter>
</li>
<li>
<label>사용량 64%</label>
<!-- 전체 100 중에서 64만큼 차지합니다 -->
<meter min="0" max="100" value="64"></meter>
</li>
<li>
<label>트래픽 초과</label>
<!-- 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9216이 더 큽니다 -->
<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
</li>
<li>
<label>적절한 트래픽</label>
<!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다 -->
<meter value="0.5" optimum="0.8"></meter>
</li>
</ul>
'FRONT-END > HTML' 카테고리의 다른 글
| 폼태그 (0) | 2021.04.08 |
|---|---|
| 링크 (0) | 2021.04.06 |
| 이미지 (0) | 2021.04.06 |
| 테이블 스타일 관련 예제 (0) | 2021.04.06 |
| index-table 실습 (0) | 2021.04.06 |
