-
<!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>'web > html' 카테고리의 다른 글
Html Semantics (0) 2023.12.15