Section 5. 폼과 테이블(2)
Contents
- Form 요소
- 일반적인 입력 형식
- 가장 중요한 레이블
- HTML 버튼
- 이름 속성
- 구글과 레딧 검색하기
- 라디오 버튼, 체크박스와 선택창
- 범위 및 텍스트 영역
- HTML5 폼의 유효성 검사
1. input
가장 일반적인 Form control이다. type을 통해 20개 이상의 기능을 사용할 수 있다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
in)
<body>
<h1>Forms Demo</h1>
<form action="/tacos">
<p>
<label for="username">Enter a Username:</label>
<input id="username" type="text" placeholder="username">
</p>
<p>
<label for="password">Enter a Password</label>
<input type="password" placeholder="password" id="password">
</p>
<p>
<label for="color">Enter a Color</label>
<input type="color" id="color">
</p>
<p>
<label for="number">Enter a Number</label>
<input type="text" placeholder="enter a number" id="number">
</p>
<button>Submit</button>
</form>
</body>out)
2. button
in)
<body>
<h1>Forms Demo</h1>
<form action="/tacos">
<p>
<label for="username">Enter a Username:</label>
<input id="username" type="text" placeholder="username">
</p>
<p>
<label for="password">Enter a Password</label>
<input type="password" placeholder="password" id="password">
</p>
<p>
<label for="color">Enter a Color</label>
<input type="color" id="color">
</p>
<p>
<label for="number">Enter a Number</label>
<input type="text" placeholder="enter a number" id="number">
</p>
<button type="button">Regular button (won't submit)</button>
<button>Submit!!!</button>
<input type="submit" value="Click Me!">
</form>
<hr>
<button>Not Inside Form</button>
</body>out)
3. name 속성
: 서버로 데이터를 전송할 때 사용되기 때문에, 모든 <input>에 name을 다 넣어야 한다.
<body>
<h1>Forms Demo</h1>
<form action="/tacos">
<p>
<label for="username">Enter a Username:</label>
<input id="username" type="text" placeholder="username" name="username">
</p>
<p>
<label for="password">Enter a Password</label>
<input type="password" placeholder="password" id="password" name="password">
</p>
<p>
<label for="color">Enter a Color</label>
<input type="color" id="color" name="color">
</p>
<p>
<label for="number">Enter a Number</label>
<input type="text" placeholder="enter a number" id="number" name="num">
</p>
<button type="button">Regular button (won't submit)</button>
<button>Submit!!!</button>
<input type="submit" value="Click Me!">
</form>
<hr>
<button>Not Inside Form</button>
</body>
위와 같은 상태로 Submit!!!를 하면, 아래와 같은 URL로 이동한다.
get 요청으로 전송하여 데이터가 URL 안에 표시되는데, 비밀번호가 URL에 있으면 문제가 발생한다.
-> post 요청 등의 HTTP 요청으로 데이터가 URL에 표시되지 않고 전송되게 할 수 있다.
4. Reddit, Google, Youtube 검색하기
<h3>Search Reddit</h3>
<form action="https://wwww.reddit.com/search">
<input type="text" name="q">
<button>Search Reddit</button>
</form>
<h3>Search Google</h3>
<form action="https://www.google.com/search">
<input type="text" name="q">
<button>Search Google</button>
</form>
<h3>Search Youtube</h3>
<form action="https://www.youtube.com/results">
<input type="text" name="search_query">
<button>Search Youtube</button>
</form>
5. Radio
<h2>More Input!</h2>
<form action="/birds">
<input type="checkbox" name="agree_tos" id="agree">
<label for="agree">I agree to everything</label>
<p>
<label for="XS">XS</label>
<input type="radio" name="size" id="xs">
<label for="S">S</label>
<input type="radio" name="size" id="s">
<label for="M">M</label>
<input type="radio" name="size" id="m">
</p>
</form>
6. Select
<p>
<label for="meal">Please Select an Entree</label>
<select name="meal" id="meal">
<option value="fish">Fish</option>
<option value="vegetarian" selected>Vegetarian</option>
<option value="steak">Steak</option>
</select>
</p>
7. Range
<p>
<label for="cheese">Amount of Cheese</label>
<input type="range" id="cheese" min="1" max="100" name="cheese_level">
</p>
8. Textarea
<p>
<label for="requests">Any Special Requests?</label>
<br>
<textarea id="requests" rows="10" cols="40" name="Requests?" placeholder="Type something here"></textarea>
</p>
git checkout 37649524a07ebef49bc5b8d94d64077ad6624774