web/html
Form
wefree
2023. 12. 19. 14:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Forms Demo</h1>
<h2>Form Basics</h2>
<form action="/tacos">
<!-- label 의 for 는 id 와 연결됨 -->
<!-- 연결된 상태에서 input 이 아닌 label 을 클릭해도 입력창에 focus 된다 -->
<div>
<label for="username">Enter a username: </label>
<input id="username" name="name" type="text" placeholder="user name">
</div>
<!-- 아래처럼 lable, input 을 코딩하는 것도 가능하다 -->
<div>
<label>
Enter a password:
<input id="password" name="pass" type="password" placeholder="password">
</label>
</div>
<!-- 이렇게 form 안에 버튼을 생성하면 form 을 action 과 연결해 submit -->
<!-- Submit 버튼을 누르면 위의 form 의 name 속성이 http query param key 로 설정되어 HTTP 요청이 됨 -->
<button>Submit</button>
<!-- 이렇게 type 속성으로 button 을 지정해 주면 form submit 하지 않고 버튼으로만 동작 -->
<button type="button">OnlyButton</button>
<!-- 아래와 같이 submit button 을 정의하는 방법도 있는데 별로 좋지는 않은 듯? -->
<input type="submit" value="Click Me">
</form>
<h2>Check, Radio, Select</h2>
<form action="/birds">
<div>
<input type="checkbox" name="agree_tos" id="agree" checked>
<label for="agree">I agree to everything</label>
</div>
<div>
<!-- radio button 들을 동일한 name 을 지정해 하나의 그룹으로 묶음 -->
<!-- value attribute 값으로 query param value 가 지정되어 HTTP 요청됨, 예) size=100 -->
<label for="xs">XS:</label>
<input type="radio" name="size" id="xs" value="100">
<label for="s">S:</label>
<input type="radio" name="size" id="s" value="50">
<label for="m">M:</label>
<input type="radio" name="size" id="m" value="10">
</div>
<div>
<label for="meal">Please select an Entree</label>
<select name="meal" id="meal">
<option value="fish">Fish</option>
<option value="steak" selected>Steak</option>
</select>
</div>
<button>Submit</button>
</form>
</body>
</html>