input에서 입력 받은 정보를 form을 통해 처리 할 수 있다.
form action="input에서 입력된 값을 처리할수 있는 url로 이동 시킴"
method = "post / get" 으로 설정하며
post는 입력후 전송시 내역이 보이지 않도록 한다. (로그인시)
get은 내역이 보임(검색시)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/login" method="post" autocomplete="off" novalidate>
<input name="id" type="email" placeholder="아이디를 입력하세요."> <br>
<input name="pw" type="password" placeholder="비밀번호를 입력하세요."> <br>
<button type="submit">로그인</button>
</form>
</body>
</html>
노란색 음영이 칠해진 곳이 label 영역이고, input 에 마우스를 누르지 않아도 노랑영역 안을 클릭하면 입력창이 활성화 된다.
* <label>을 <input>요소와 연관시키려면, <input>에 id 속성을 넣어야 합니다.
그런다음 <label>에 id와 같은 값의 for 속성을 넣어야 합니다.
- id는 css에서 style을 지정해줄때 사용하는 선택자 이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<label>
# 이름 : <input type="text"> <br>
</label>
<label>
<input type="checkbox"> 자동 로그인
</label>
<input type="checkbox" id="remember">
<label for ="remember">아이디 기억하기 </label>
<textarea cols="20" rows="5"></textarea>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<select>
<optgroup> <!-- 선택 옵션들을 카테고리화 시키는 optgroup -->
<option>Americano</option>
<option selected>Caffe Latte</option>
<!-- 선택시 최초로 보이게 만드려면 옵션에 selected 입력. -->
<option disabled>Cappuccino</option>
<!-- 선택창에서 선택하지 못하게 하려면 옵션에 disabled 입력 -->
</optgroup>
<optgroup>
<option >Orange Juice</option>
<option >Lime Juice</option>
</optproup>
</select>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="query">
<button type="submit"> 검색</button>
</form>
<br><br>
<br><br>
<input type="text" name="id" placeholder="아이디를 입력하세요."><br>
<input type="password" name="pw" placeholder="비밀번호를 입력하세요."><br>
<button type="submit">로긴</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
# 이름: <input type="text" value="김철수" disabled><br> <!-- disable 은 input이 불가능하게 만듬. -->
# 비밀번호: <input type="password"> <br>
# 이메일: <input type="eamil" placeholder="aaa@bbb.com"><br> <!-- 이메일 타입은 텍스트검증을 자동으로 하는 기능을 내포하고 있음. -->
# 취미:
<input type="checkbox"> 게임
<input type="checkbox" checked> 축구 <!-- 대부분 축구를 선택하는 경우 기본선택을 축구로 설정 cehcked -->
<input type="checkbox" disabled> 공연관람<br> <!-- 선택을 불가능하게 disabled -->
<!-- checkbox는 다중선택이 가능 -->
# 메일 수신 여부 :
<input type="radio" name="mail-verify"> 예
<input type="radio" name="mail-verify"> 아니오 <!-- name 속성으로 그룹인것을 인식 시켜주지 않으면 모두다 체크됨 -->
# 파일 : <input type="file" multiple> <br>
<input type="range" min="0" max="100" value="1"><br> <!-- 이동 스크롤 범위 설정 / value는 시작 기본값 -->
# 주문수량 :
<input type="number" value="1" min="5" max="10"> <br> <!-- 숫자말고 입력이 안됨 -->
<input type="hidden" name="abc" value="메롱"> <!-- 사용자 몰래 서버로 전송할 데이터 abc = 메롱 -->
<button type="button">그냥버튼</button>
<!-- 그냥버튼 : 기능이 없고 개발자가 기능을 넣어서 쓰는 버튼 -->
<button type="reset">초기화버튼</button>
<!-- 초기화버튼 : 초기화 기능을 가진 버튼 -->
<button type="submit">전송버튼</button>
<!-- 전송버튼 : input 내용을 전송하는 기능을 가진 버튼 -->
</form>
</body>
</html>
'HTML입문' 카테고리의 다른 글
| HTML_표컨텐츠태그(table)_22.04.06(wed) (0) | 2022.04.07 |
|---|---|
| HTML_멀티미디어태그(이미지,iframe,스크립트)_22.04.06(wed) (0) | 2022.04.07 |
| HTML_인라인태그(강조태그,링크태크)_22.04.06(wed) (0) | 2022.04.07 |
| HTML_컨텐츠태그(제목태그,목록태그)_22.04.06(wed) (0) | 2022.04.07 |
| HTML_블록요소와 인라인요소(22.04.05_tue) (0) | 2022.04.07 |