폼 만들기
<form>태그 - 폼 만들기
<form 속성="속성값">폼 요소</form>
<form>태그의 속성
속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지,
서버에서 어떤 프로그램을 이용해 처리할 것인지 지정
| 속성 | 설명 | |
| method | 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정 | |
| 속성값 | get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남. 256byte ~ 4096byte까지의 데이터만 서버로 넘길 수 있음. | |
| post - 대부분 이 방식을 사용. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않음 | ||
| name | 폼의 이름을 지정. 한 문서 안에 여러 개의 <form>태그가 있을 경우, 폼들을 구분하기 위해 사용 | |
| action | <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정 | |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 | |
<form action="register.php">
폼 요소
</form>
→ form 에 내용을 입력하고 전송 버튼을 눌렀을 때 register.php를 실행
autocomplete 속성 - 자동 완성 기능
검색창 또는 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것
이 기능을 '자동 완성 기능'이라고 하는데 이 기능을 autocomplete 속성을 이용할 수 있다.
기본 값은 "on"이며, "off"로 지정해 유출되면 곤란한 비밀번호나 일회용 인증번호 등은 자동 완성 기능을 끌 수 있다.
<form action="register.php" autocomplete="off">
폼 요소
</form>
<label>태그 - 폼 요소에 레이블 붙이기
<input>요소 옆에 텍스트를 붙여 놓는 용도로 사용
1. <label>태그 안에 폼 요소를 넣는 방법
<label>레이블<input ...></label>
2. <label>요소와 폼 요소를 따로 사용하고
<label>태그에는 for 속성을 이용하고, 폼 요소에서는 id 속성을 이용해 서로 연결시키는 방법
<label for="id이름">레이블</label>
<input id="id이름" 속성="속성 값">
라디오 버튼과 체크박스에서 사용하는 <label>태그
<label>태그를 이용해 라디오 버튼이나 체크박스에 텍스트(label)를 연결해 놓았다면
텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 사용이 훨씬 쉬워진다.
<fieldset>, <legend>태그 - 폼 요소 그룹으로 묶기
<fieldset 속성="속성값"> . . . </fieldset>
폼 안에서 여러 구역을 나누어 표시하려고 할때 <fieldset>태그와 <legend>태그를 사용
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name">
</li>
</ul>
.
.
.
</fieldset>
사용자 입력을 위한 <input>태그
<input>태그는 폼에서 사용자 입력을 받기 위해 사용하는 태그
<input>태그 - 입력 항목 만들기
<input type="유형" 속성="속성값">
<input>태그의 type속성 (1)
| 유형 | 설명 |
| hidden | 사용자에게는 보이지 않지만 서보로 넘겨지는 값을 가짐 |
| text | 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣음 |
| search | 검색 상자를 넣음 |
| tel | 전화번호 입력 필드를 넣음 |
| url | URL 주소를 입력할 수 있는 필드를 넣음 |
| 메일 주소를 입력할 수 있는 필드를 넣음 | |
| password | 비밀번호를 입력할 수 있는 필드를 넣음 |
| date | 사용자 지역을 기준으로 날짜(연,월,일)를 넣음 |
| number | 숫자를 조절할 수 있는 화살표를 넣음 |
type="hidden" - 히든 필드 만들기
히든(hidden)필드는 화면상의 폼에는 보이지 않지만
사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소
사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 입력
<input type="hidden" name="이름" value="서버로 넘길 값">
type="text" - 텍스트 필드 만들기
폼에서 가장 많이 사용하는 요소로 주로 아이디나 이름, 주소 등 텍스트를 입력 할 때 사용
<input type="text" 속성="속성값">
텍스트 필드에서 사용하는 속성
| 속성 | 설명 |
| name | 텍스트 필드를 구별할 수 있도록 이름을 붙임 |
| size | 화면에 몇 글자가 보이도록 할 것인지 텍스트 필드의 길이를 지정 |
| value | 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시 |
| maxlength | 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정 |
type="password" - 비밀번호 입력란 만들기
사용자가 입력하는 내용이 화면에 표시되지 않고 ' * ' 이나 ' ● ' 로 표시된다
<input type="password" 속성="속성값">
type="search", type="url", type="email", type="tel" - 분화된 텍스트 필드
type="search" - 검색상자 만들기
<input type="search" 속성="속성값">
type="url" - URL 입력란 만들기
<input type="url" 속성="속성값">
이 필드에서는 반드시 'http://'로 시작하는 사이트 주소를 입력해야 함.
type="email" - 메일 주소 입력란 만들기
<input type="email" 속성="속성값">
이 필드를 사용하면 브라우저 자체에서 사용자가 입력한 내용이 메일 주소 형식에 맞는지 자동으로 체크해준다.
type="tel" - 전화번호 입력란 만들기
<input type="tel" 속성="속성값">
유효성 검증을하여 잘못 입력한 값이 (비싼) 서버단의 용량을 쓰지 못하도록 구분하여 사용한다!
type="date" - 날짜 표시하기
<input type="date" value="기본값" 속성="속성값">
달력에서 날짜를 선택했을 때 필드에 "yyyy-mm-dd" 형식으로 연도와 월, 일이 표시
type="number" - 숫자 입력하기
<input type="number" 속성="속성값">
사용자가 입력한 내용을 숫자로 인식함.
입력 창에 숫자를 직접 입력하는 것이 기본이지만 브라우저에 따라 스핀박스가 표시 되기도 한다.
<label>주문개수:</label><input type="number" min="1" max="5" value="1">개
min = 최소값 , max = 최대값, value = 기본값
<input>태그의 type속성 (2)
| 유형 | 설명 |
| range | 숫자를 조절할 수 있는 슬라이드 막대를 넣음 |
| color | 색상 표를 넣음 |
| checkbox | 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣음 |
| radio | 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣음 |
| file | 파일을 첨부할 수 있는 버튼을 넣음 |
| submit | 서버 전송 버튼을 넣음 |
| reset | 리셋 버튼을 넣음 |
type="range" - 슬라이드 막대로 숫자 지정하기
<input type="range" 속성="속성값">
type="range"는 슬라이드 막대를 움직여 숫자 값을 입력
type="range"와 type="number"에서 쓸 수 있는 속성
| 속성 | 설명 |
| min | 필드에 입력할 수 있는 최소값을 지정. type="range" 일 때 기본 최소값은 0 |
| max | 필드에 입력할 수 있는 최대값을 지정. type="range" 일 때 기본 최대값은 100 |
| step | 짝수나 홀수 등 특정 숫자로 제한하려고 할때 숫자 간격을 지정할 수 있음. 기본값은 1 생략가능 |
| value | 필드에 표시할 초기값 |
type="color" - 색상 선택 상자 표시하기
<input type="color" value="기본색" 속성="속성값">
type="radio", type="checkbox" - 라디오 버튼과 체크박스 넣기
<input type="radio" 속성="속성값">
<input type="checkbox" 속성="속성값">
라디오 버튼과 체크박스는 여러 항목 중 원하는 항목을 선택할 때 사용하는 폼 요소
한 개만 선택하도록 할 경우 라디오 버튼을 사용
두 개 이상 여러가지를 선택해도 될 경우 체크박스를 사용
라디오 버튼과 체크박스에 사용하는 속성
| 속성 | 설명 |
| name | 라디오 버튼이나 체크박스가 여러 개 있을 경우, 서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정. 라디오 버튼을 여러개 중에서 하나만 선택하는 것이기 때문에 관련 있는 그룹끼리는 name속성 값을 똑같이 만듬 |
| value | 선택한 라디오버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정. 이 값은 영문이거나 숫자여야 하며 필수 속성이다. |
| checked | 기본으로 선택해놓을 항목이 있다면 이 속성을 사용 |
type="file" - 파일 첨부하기
<input type="file" 속성="속성값">
웹 브라우저 화면에 [파일선택] 또는 [찾아보기] 등이 표시되고 파일 첨부가 가능하다.
type="submit" , type="reset" - 서버 전송, 리셋 버튼 넣기
<input type="submit | reset" value="버튼 내용" 속성="속성값">
reset 은 <input>요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지움
submit은 사용자가 폼에 입력한 정보를 서버로 전송하는 역할
<form action="registerPro.jsp" method="post">
<ul>
<li><input type="text" name="userid" placeholder="아이디 입력" autofocus></li>
<li><input type="password" name="pwd" placeholder="비밀번호 입력"></li>
<li>
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
</li>
<li>
<input type="checkbox" name="hobby" value="영화감상"> 영화감상
<input type="checkbox" name="hobby" value="운동"> 운동
</li>
<li><input type="file"></li>
<li>나이: <input type="number" name="age" min="1" max="150"></li>
<li>1 <input type="range" name="range" min="1" max="10"> 10</li>
<li><input type="color" name="color" value="#FC0"></li>
<li><input type="datetime-local" name="time"></li>
<li><input type="date" name="date"></li>
<li><input type="email" name="email" placeholder="이메일 입력"></li>
<li><input type="url" name="url"></li>
<li><input type="tel" name="tel"></li>
<li><input type="search" name="word"></li>
<li>
<input type="submit" value="전송">
<input type="reset" value="다시쓰기">
</li>
</ul>
</form>
<input>태그의 다양한 속성
autofocus 속성 - 입력 커서 표시하기
페이지를 불러오자마자 폼 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있음
placeholder 속성 - 힌트 표시하기
사용자가 텍스트를 입력할 때 입력란에 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 속성
텍스트 필드 앞에 제목(<label>태그 등)을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야할지 알려줄 수 있어 편리
readonly 속성 - 읽기 전용 필드 만들기
입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만드는 기능
required 속성 - 필수 필드 지정하기
필수적으로 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들어 줌
<form action="registerPro.jsp" method="post">
<ul>
<li><input type="text" name="userid" placeholder="아이디 입력" required autofocus></li>
<li><input type="password" name="pwd" placeholder="비밀번호 입력"></li>
<li>
<input type="radio" name="gender" value="남자" checked> 남자
<input type="radio" name="gender" value="여자"> 여자
</li>
<li><input type="email" name="email" placeholder="이메일 입력"></li>
<li>
<input type="submit" value="전송">
<input type="reset" value="다시쓰기">
</li>
</ul>
</form>
여러 데이터 나열해 보여주기
<select>, <optgroup>, <option> 태그 - 드롭다운 목록 만들기
사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록은 사용
<select 속성="속성값">
<option value="값" 속성="속성값"> 내용1 </option>
<option value="값" 속성="속성값"> 내용2 </option>
...
</select>
<option>태그의 속성
| 속성 | 설명 |
| value | 옵션을 선택했을 때 서버로 넘겨질 값을 지정 |
| selected | 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>product order</h2>
<div class="pf">
<h3>personal information</h3>
<input type="text" name="name" placeholder="이름 입력" autofocus required>
<input type="tel" name="ptel" placeholder="연락처 입력" required>
<div class="email-box">
<input type="text" name="email-id" placeholder="이메일 아이디 입력">
<select name="email-addr">
<option value="@naver.com" selected>네이버</option>
<option value="@daum.net">다음</option>
</select>
</div>
</div>
</body>
</html>
기타 다양한 폼 요소들
<button>태그 - 버튼 넣기
<button type="submit | reset | button">내용</button>
<button>태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정
속성을 지정하지 않으면 submit으로 간주된다.
<input type="submit | reset | button">으로도 삽입할 수도 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="wrap">
<h2>login</h2>
<p>로그인을 하시면 더욱 편리하게 이용하실 수 있습니다</p>
<form action="loginPro.jsp" method="post">
<ul class="login">
<li>
<input type="text" name="id" placeholder="아이디를 입력하세요" autofocus required>
<input type="password" name="pwd" placeholder="비밀번호를 입력하세요" required class="no">
</li>
<li><button type="submit" class="submit">로그인</button></li>
</ul>
</form>
<div class="box">
<input id="ch-id" type="checkbox" value="check" class="checkid"> <label for="ch-id">아이디 저장</label>
</div>
<ul class="btn-group">
<li><button onclick="findId()">이이디 찾기</button></li>
<li><button onclick="findPwd()">비밀번호 찾기</button></li>
</ul>
</div>
</body>
</html>
<output>태그 - 계산결과
<output 속성="속성값">내용</output>
입력하는 값이 계산 결과라는 것을 브라우저에 알려줌
<progress>태그 - 진행 상태 보여주기
<progress value="값" max="값"></progress>
<progress>태그는 작업 진행 상태를 나타낼 때 사용하는 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box { display:flex; align-items:center; }
.box input { width:150px; margin:0 10px; }
</style>
</head>
<body>
<form class="box" onchange="result.value = parseInt(num1.value) + parseInt(num2.value)">
<input type="number" name="num1" value="0"> + <input type="number" name="num2" value="0"> = <output name="result"></output>
</form>
<progress value="30" max="60"></progress>
</body>
</html>
'Front-end > HTML5' 카테고리의 다른 글
| HTML5 - 이미지와 하이퍼링크 (1) | 2024.02.10 |
|---|---|
| HTML5 - 요소 / 텍스트 관련 태그(제목 태그, 목록 태그, 테이블 태그) (1) | 2024.02.10 |
| HTML이란? (0) | 2024.02.09 |