input : inline 레벨
사용자로부터 입력을 받을 수 있는 태그
닫는 태그 없음(img태그처럼 기본사이즈가 정해져있다. )
```
<input type = "유형" 속성="속성값"...>
```
★중요★
- 속성 -
1) type : 필수태그
해당 input이 어떤건지 유형 정하기
1. text
2. password
3. button
4. radio : 선택해제 불가. 옵션 중 하나만 선택가능
5. checkbox : 선택해제 가능
2) value : 실제값. submit하면 넘어가는 값.
옵션속성
필수처럼 사용하는 type : button, radio/
3) name : 요소에 이름 줄 때
그룹핑할 때 사용
필수처럼 사용하는 type : radio
chkbox나 radio에서는 정보를 넘길 때 나용/
label : 특정요소와 연결 (ex) 글자만 눌러도 radio버튼 눌릴 수 있게)
<input type="radio" value="웹1" name="rd" id = "web1">
<label for="web1">웹1</label>
<label>
<input type="radio" value="웹2" name="rd" id="web2"> 웹2
</label>글자를 label태그로 감싸도 되고, radio버튼 자체를 label태그로 감싸도 된다.
label for에 radio의 id값 넣으면 되는데, radio버튼을 label태그로 감쌀때는 for와 id를 생략해도 된다.
label로 라디오버튼과 글자를 같이 감싸고 있는 것이 좋다.
왜냐하면 라디오버튼 시작부터 글자 끝까지를 라벨의 영역으로 인식하는데, 글자만 label로 감싼다면 라디오버튼 / 감싸여있는 글자 를 선택할 수 있는 영역이 되기 때문이다.
button : 아래같이 버튼은 버튼태그를 사용해도 된다. 열고 닫는 태그가 있어서 이미지를 넣을 수 있어서 버튼태그를 더 많이 사용한다.
<input type="button" value="여자">
<button>
<img src="./img/1.jpg" alt="여자">
</button>(참고, css)button태그는 box-sizing안해도 알아서 들어간다.
덜 중요
- 속성 -
1) submit
2) reset : value에 값 넣어놨으면 그 값은 유지(초창기값으로 초기화임)
submit, reset은 form태그 안에서만 사용가능
form안에 있는 input정보들을 넘길 때만 사용.
form밖에 있을 때는 button과 동일
3) hidden : 안보이게 해놔서 서버에서 값을 가져와서 박아놓고 사용할 수 있음. 추후 필요할 때 계속 서버와 소통하지 않아 트래픽감소에 도움을 줄 수 있음.값을 줄 때 대놓고 적지 말고 나만 알아볼 수 있게 하기!
4) search : text랑 같지만 마지막에 x가 그려져있음
5) file : 파일업로드
6) range : 사진확대축소 / 음량조절
file, range는 인터넷환경에 따라 모양이 다르니 css로 꼭 스타일 지정 필요/
거의 안씀. 하지만 알기는 해야하는 거
- 속성 -
1) number : 숫자만입력가능. 하지만 .e(지수)는 입력됨..
2) tel : 애매함. 되는 곳이 있고 안되는 곳이 있음. (숫자자판으로 바뀌는 거)
3) email : form 안에서만 사용 가능. @의 유무 판별(@넣으라고 팝업창뜸)
4) date : 날짜선택할 수 있는 거
5) datetime-local : date에다가 시간까지 선택가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 중요 -->
<input type="text" value="abcd"> <br>
<input type="password" value="abcd"> <br>
<input type="button" value="로그인"> <br>
<input type="radio" value="웹1" name="rd" id = "web1">
<label for="web1">웹1</label>
<label>
<input type="radio" value="웹2" name="rd" id="web2"> 웹2
</label>
<input type="radio" value="웹3" name="rd"> 웹3 <br>
<input type="checkbox"> 프론트
<input type="checkbox"> 백엔드
<input type="checkbox"> 풀스택 <br>
<!-- 덜중요 -->
<input type="submit"><br>
<input type="reset"><br>
<input type="hidden"><br>
<input type="search"><br>
<input type="file"><br>
<input type="range"><br>
<hr>
<!-- 거의 안씀 -->
<input type="number"><br>
<input type="tel"><br>
<input type="email"><br>
<input type="date"><br>
<input type="datetime-local"><br>
</body>
</html>속성
★1) placeholder : 옵션속성
필드에 힌트 표시
value와 다르게 한글자라도 치면 힌트 사라짐.
글씨를 다 지우면 다시 힌트가 나타남.
password에서도 글씨로 나옴.
★2) autofocus : 자동으로 커서 표시. 간혹 브라우저별로 힌트(placeholder)가 사라지는 경우가 있으니 조심.
같은 문서에 중복으로 있는 경우 첫번째 요소에만 적용된다.
```
<input type="text" autofocus> <!-- autofocus 먹힘-->
<input type="text" autofocus> <!-- autofocus 안먹힘-->
```3) readonly : 해당 필드를 읽기 전용으로 표시
4) disabled : 해당 필드를 비활성화
5) required : 해당 필드를 빈칸불가
form태그 안에서 submit 버튼 눌렀을 때만 동작/
6-7번은 크게 사용할 일이 x
6) maxlength : 단위 - 정수
해당 필드가 가질수 있는 최대 글자 수
7) minlength : 단위 - 정수
해당 필드가 가질수 있는 최소 글자 수
form태그 안에서 사용가능/
★8) checked : radio, checkbox 에서만 사용
autofocus같은 기능. 선택이 자동으로 되어있다.
여러개 설정해놓을 때 autofocus와 다르게
radio에서는 맨 마지막, checkbox는 다 체크된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="필드에 힌트표시" autofocus><br>
<input type="password" placeholder="필드에 힌트표시"><br>
readonly: <input type="text" value="value" readonly><br>
disabled: <input type="text" value="value" disabled><br>
required: <input type="text" required><br>
max, minlength: <input type="text" maxlength="6" minlength="4"> <br>
<input type="radio" name="ra" checked>
<input type="radio" name="ra"><br>
<input type="checkbox" checked>
<input type="checkbox">
</body>
</html>input text쓰려고 눌렀을 때 아웃라인나오는게 싫으면
outline: none
하면 된다.
