[HTML] 폼 태그 (action, method, text, password, submit, checkbox, radio, file)
2021. 6. 21. 02:19
728x90
01 form
- 폼 태그, 사용자로부터 입력 받는 태그들.
- 사용자로부터 입력 받는 태그들.
input,select,textarea,button
01-1 문법
<form action="처리할페이지주소" method="get|post"></form>
01-2 속성
action: 사용자가 입력한 내용을 보낼 웹서버 페이지methodpost: 내용을 패킷 body에 포함해서 보냄 외부 노출 안됨, 용량 제한이 없음.get: url에 포함해서 보냄 외부 노출 됨, 용량 제한이 있음.
02 input 요소
- 텍스트 입력
text - 비밀번호 입력
password - 라디오 버튼
radio - 체크박스
checkbox - 파일 선택
file - 선택 입력
select - 문장 입력
textarea - 버튼 입력
button - 전송 버튼
submit - 필드셋
fieldset
02-1 텍스트 입력 (text) / 비밀번호 입력 (password) / 전송 버튼 (submit)
type="text": 사용자로부터 한 줄의 텍스트를 입력받을 수 있음.type="password": 사용자로부터 비밀번호를 입력받을 수 있습니다.- 비밀번호이기 때문에 화면에는 별표나 작은 원 몸양으로 표시됨.
type="submit": 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있음.폼 핸들러 (form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폼 태그 기본</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<form action="" method="post">
아이디: <input type="text" name="id" placeholder="아이디를 입력하세요."
required autofocus maxlength="10" minlength="4">
<br>
암호: <input type="password" name="pass" placeholder="암호를 입력하세요." required>
<br>
<input type="text" value="초기값" readonly><br>
<button type="submit">로그인</button>
</form>
</body>
</html>※ required : 필수로 입력해야함.
※ readonly : 작성은 못하고 읽기만 가능.
02-2 체크박스 (checkbox)
type="checkbox": 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음.- 여러 개의 옵션을 한 번에 입력 가능.
- 이때 반드시 모든 input 요소의 name 속성이 같아야 함.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>체크박스</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h2>체크박스 실습</h2>
<input type="checkbox" id="chk1"> <label for="chk1">체크박스1</label>
<input type="checkbox" id="chk2"> <label for="chk2">체크박스2</label>
<input type="checkbox" id="chk3"> <label for="chk3">체크박스3</label>
<input type="checkbox" id="chk4"> <label for="chk4">체크박스4</label>
<h2>레이블 실습</h2>
<label for="id">아이디</label> <input type="text" id="id">
</body>
</html>
02-3 라디오 버튼 (radio)
type="radido": 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있음.- 이때 반드시 모든 input 요소의 name 속성이 같아야 함.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>라디오 버튼</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h2>체크박스 실습</h2>
<input type="checkbox" id="chk1"> <label for="chk1">체크박스1</label>
<input type="checkbox" id="chk2"> <label for="chk2">체크박스2</label>
<input type="checkbox" id="chk3"> <label for="chk3">체크박스3</label>
<input type="checkbox" id="chk4"> <label for="chk4">체크박스4</label>
<h2>레이블 실습</h2>
<label for="id">아이디</label> <input type="text" id="id">
<h2>라디오 버튼</h2>
<!--name 속성 값으로 체크박스와 라디오 버튼을 그룹으로 묶어준다-->
<input type="radio" id="r1"> <label for="r1">예</label>
<input type="radio" id="r2"> <label for="r2">아니오</label>
</body>
</html>※ checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있음.
02-4 파일 선택 (file)
type="file": 사용자로부터 파일을 전송받을 수 있음.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폼 태그</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<!--첨부파일-->
<input type="file"><br>
</body>
</html>
02-5 기타
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폼 태그</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<!--날짜 선택, datepicker-->
<input type="date"><br>
<!--색상 선택, colorpiccker-->
<input type="color"><br>
<!--숫자-->
<input type="number" step="2" max="20" min="0"><br>
<!--slider-->
<input type="range"><br>
<!--진행바 : progressbar-->
<!--기본값으로 설정된 값 0 ~ 1-->
<progress value="0.7"></progress><br>
<progress max="100" value="50"></progress>
</body>
</html>728x90
'HTML > Study' 카테고리의 다른 글
| [HTML] iframe (테두리 변경, 크기 변경, 페이지 변경) (1) | 2021.06.21 |
|---|---|
| [HTML] 테이블 태그 <table>, <tr>, <td>, <th>, colspan, rowspan (1) | 2021.06.21 |
| [HTML] 하이퍼링크 태그 (HTML 책갈피) <a> 태그의 name 속성 (1) | 2021.06.21 |
| [HTML] 하이퍼링크 태그 <a>, href, title, target (1) | 2021.06.21 |
| [HTML] 이미지 태그 <img>, src, alt / 멀티미디어 태그 <video>, <audio> (1) | 2021.06.21 |
