<!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>input tag</title>
</head>
<body>
<!-- 쌍태그 : 열고 닫는 태그 ex) p
단일태그 : 열고 닫지 않는 태그 ex) meta, input -->
<!-- input tag : 여러가지 다양한 기능에 사용
type 속성에 따라 여러기능으로 사용
사용자에게 정보를 입력받는 경우 사용
<input type = "속성명">
<form>태그와 같이 사용된다.</form> -->
<!-- type = "text"
- 가장 많이 사용
- 영문, 한글, 특수문자 등의 문자를 입력할 때 사용
- placeholder : 미리보기처럼 흐리게 표시 -->
ID : <input type="text">
PASSWORD : <input type="text" placeholder="비밀번호">
<br>
<!-- type = "button"
- 3가지의 형식으로 지원
1. "button" : 기본형
2. "submit" : 전송버튼, 서버로 전송하세요 (로그인,회원가입)
3. "reset" : 취소버튼
= 보통 form태그와 함께 사용! -->
<form action="">
<input type="text">
<input type="text">
<input type="button" value="버튼">
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
<!-- type = "password"
- 비밀번호에 사용
- 값을 넣으면 *로 표현 -->
<input type="password">
<!-- type = "checkbox" : 다중선택
type = "radio" : 하나만 선택 -->
<input type="checkbox">
<input type="radio">
<form action="">
<p>좋아하는 과일은? (복수가능) </p>
<input type="checkbox" name="fruit" value="apple"> 사과
<input type="checkbox" name="fruit" value="orange"> 오렌지
<input type="checkbox" name="fruit" value="banana"> 바나나
<input type="submit" value="전송">
<!-- submit 사용
페이지 주소 : http://127.0.0.1:5500/day01/03_input.html?
fruit=apple&fruit=orange&fruit=banana
(사과,오렌지,바나나를 선택해 버튼을 누르면 name인 fruit에 담아 전송) -->
</form>
<form action="">
<p>좋아하는 과일은? </p>
<!-- lable for : 같이 세트로 묶음
- (for=""와 id=""가 동일)
- apple,orange,banana 이름을 눌러도 체크박스에 표시가 됨
- 라벨 뒤 삽입과 중간 삽입 input은 동일 -->
<label for="apple">사과</label>
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="orange">오렌지
<input type="checkbox" name="fruit" value="orange" id="orange">
</label>
<label for="banana">바나나</label>
<input type="checkbox" name="fruit" value="banana" id="banana">
<input type="submit" value="전송">
</form>
<form action="">
<!-- input type="color" : 색상선택
- rgb로 색상 선택이 가능
- 색상정보를 16진수로 표현 -->
<input type="color" name="color">
<input type="submit" value="전송">
</form>
<form action="">
<!-- type = 날짜
type = "month" : 년 월
type = "week" : 년 주
type = "date" : 년 월 일
type = "datetime-local" : 년 월 일 시 분 초
type = time" : 시 분 초
- 실무에서는 jqurey에서 제공하는 datepicker /
- 부트스트랩에서 제공하는 datepiker을 사용함-->
<input type="month"> <br>
<input type="week"><br>
<input type="date"><br>
<input type="datetime-local"><br>
<input type="time">
</form>
<form action="">
<!-- type = "email" : 이메일 형식인지 확인 (@사용)-->
<!-- type = "url" : url 형식인지 확인 (http사용)-->
<input type="email" name="email" id="">
<input type="url" name="url" id="">
<input type="submit" name="" id="" value="전송">
</form>
<form action="">
<!-- type = "file" :첨부파일 선택 -->
<input type="file" name="" id="">
</form>
<form action="">
<!-- type = "hidden" : 숨김속성
- 값을 안보이게 숨김
- 실제 백앤드에서 많이 사용-->
<input type="hidden" name="" id="" value="숨김속성">
</form>
<form action="">
<!-- type = "image" : img태그와 동일 (이미지추가역할)
- src = "이미지의 주소"
- 1. src = "인터넷 이미지 주소"
- 2. src = "/파일명/이미지이름"
- alt : 이미지가 없을 경우 보여지는 문자-->
<input type="image" src="주소">
<input type="image" src="/image/냥3.jpg" alt="고양이사진">
</form>
<form action="">
<!-- type = "number" : 숫자만 입력이 가능한 창
- 위/아래로 숫자 올리고 내리기 가능
- 수량선택에 자주 사용 -->
<input type="number">
</form>
<form action="">
<!-- type = "range" :상태바 -->
1 <input type="range"> 10
</form>
<form action="">
<!-- radio를 이용하여 on/off를 만들기 -->
<label for="on">on</label>
<input type="radio" name="switch" value="on" id="on">
<label for="off">off</label>
<input type="radio" name="switch" value="off" id="off">
<input type="submit" value="전송">
</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>input 연습문제</title>
</head>
<body>
<h1 style="background-color: aliceblue;">회원가입</h1>
<form action="">
아이디 : <input type="text" name="id"> <br>
비밀번호 : <input type="password" name="pw"> <br>
비밀번호확인 : <input type="password" name="pw2"> <br>
이메일 : <input type="email" name="email"> <br>
성별 :
<input type="radio" name="gender" value="남성"> 남성
<input type="radio" name="gender" value="여성"> 여성
<br>
전화번호 : <input type="number" name="num1">-
<input type="number" name="num2">- <input type="number" name="num3"> <br>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>
</body>
</html>
'HTML.CSS.JS > html' 카테고리의 다른 글
| [html] a tag/ herf, target, download 속성 (0) | 2023.04.24 |
|---|---|
| [html] inline, block, inline-block 속성 (0) | 2023.04.24 |
| [html]text 태그 (0) | 2023.04.24 |
| [HTML] style 태그 (0) | 2023.04.05 |
| [HTML] img 태그 (0) | 2023.04.05 |