728x90
반응형
SMALL
HTML FORM
- TAG 3 포스팅에 이어 html form 작성하는 방법에 대해서 작성하고자 한다.
- <input type = "지정할 타입" name="이름" placeholder ="value가 없을때 보여지는 텍스트" value = "안에 들어갈 값">
- type
- text : 입력받는 value가 text
- number: 입력받는 value가 number
- password: 입력받는 value가 password임을 알리고 이를 ****등의 형식으로 바꿈
- raido : 입력받는 value가 사용자의 선택에 의해 정해짐 (하나만)
- checkbox : 입력받는 value가 사용자의 선택에 의해 정해짐 (여러개)
- date : 날짜를 입력 받음
- type
- 태그 마지막에 들어갈 수 있는 값
- required : 필수 요소임을 뜻하고 이를 브라우저에서 인지하고 작성해달라고 함
- disable : 해당 입력칸은 focus가 되지 않고, 그걸 시각적으로 보여줌
- readonly : 해당 입력칸도 focus가 되지 않지만 그걸 시각적으로 보여주진 않음
- checked : radio 나 checkbox 에서 사용되며 랜더될때 check를 한 상태를 보여주게 됨
- 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form3</title>
</head>
<body>
<h3>INPUT TYPES</h3>
<form action="https://www.w3schools.com/action_page.php">
<!-- hidden -->
<input type="hidden" name="data1" value="alpha">
<input type="hidden" name="data2" value="beta">
<br><hr>
<!-- 필수요소인 경우 required ,placeholder : 입력 힌트 -->
Id: <input type="text" name="id" placeholder="id 입력 필수" required>
<br><hr>
<!-- disabled, readonly -->
별명: <input type="text" name="nick" value="가용하지 않은 값" disabled><br>
취미: <input type="text" name="hobby" value="읽기전용" readonly><br>
<br><hr>
<!-- number -->
아무숫자: <input type="number" name="age">
<br><hr>
<!-- password -->
비밀번호: <input type="password" name="psw">
<br><hr>
<!-- radio -->
<input type="radio" name="gender" value="male" checked>남성<br>
<input type="radio" name="gender" value="female" >여성<br>
<br><hr>
<!-- checkbox -->
<input type="checkbox" name="vehicle1" value="bike">자전거<br>
<input type="checkbox" name="vehicle2" value="car" checked>자동차<br>
<br><hr>
<!--date -->
날짜 예시: <input type="date" name="orderDate">
<br><hr>
</form>
</body>
</html>
728x90
반응형
LIST
'프로그래밍 > HTML + CSS' 카테고리의 다른 글
| [HTML/기본] TAG3 (0) | 2023.10.24 |
|---|---|
| [HTML/기본] TABLE (1) | 2023.10.23 |
| [HTML/기본] TAG2 (0) | 2023.10.22 |
| [HTML/기본] TAG (0) | 2023.10.20 |
