Form
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
<form> - HTML: Hypertext Markup Language | MDN
HTML <form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
developer.mozilla.org
예제1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forms Demo</title>
</head>
<body>
<h1>Forms Demo</h1>
<form action="">
<input type="checkbox">
<input type="radio">
<input type="image">
<input type="color">
<input type="number" min="1" max="10">
<input type="range" min="0" max="100" step="10" value="0">
<input type="email">
<input type="url">
</form>
<hr>
<h2>Labels</h2>
<form action="">
<div>
<label for="name">Enter a Username:</label>
<input type="text" name="n" placeholder="Username" id="name">
</div>
<label for="pwd">Enter a Password:</label>
<input type="password" name="p" placeholder="Password" id="pwd">
</div>
</form>
<hr>
<h2>Buttons</h2>
<form action="">
<button type="submit">Submit</button>
<button type="button">Just a button</button>
</form>
<hr>
<h2>Search on everywhere</h2>
<p>
<form action="https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch">
<input type="text" name="query">
<button>Search on Naver</button>
</form>
</p>
<p>
<form action="https://www.google.co.kr/search">
<input type="text" name="q">
<button>Search on Google</button>
</form>
</p>
<p>
<form action="https://www.youtube.com/results">
<input type="text" name="search_query">
<button>Search on Youtube</button>
</form>
</p>
<hr>
<div>
<label for="may">Please select</label>
<select name="may" id="may">
<option value="">--Choose an option--</option>
<option value="j">Just May</option>
<option value="c">Cute May</option>
<option value="p">Pretty May</option>
<option value="s">Sweet May</option>
<option value="a">Angry May</option>
</select>
<button>Submit</button>
</div>
<hr>
<p>
<h3>Please write your message.</h3>
<label for="message">Please write it here.</label>
<br>
<textarea id="message" cols="30" rows="5" placeholder="Your message."></textarea>
</p>
<hr>
<fieldset>
<div>
<input type="radio" id="agree" name="radio" value="yes" checked>
<label for="agree">Yes</label>
</div>
<div>
<input type="radio" id="not_agree" name="radio" value="no">
<label for="not_agree">No</label>
</div>
</fieldset>
<form action="">
<input type="checkbox" name="box" id="box" value="agree" checked>
<label for="box">I agree to everything.</label>
<button>Submit</button>
</form>
<hr>
<h2>Validations Demo</h2>
<form action="/dummy">
<label for="vname">Enter Your Name</label>
<input type="text" id="vname" required>
<label for="vpwd">Your Password</label>
<input type="password" id="vpwd" minlength="7" maxlength="15" required>
<button>Submit</button>
</form>
</body>
</html>간단한 Validation
<label for="vname">Enter Your Name</label>
<input type="text" id="vname" required>
<label for="vpwd">Your Password</label>
<input type="password" id="vpwd" minlength="7" maxlength="15" required>예제2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Race Register Form</title>
</head>
<body>
<h1>Race Registration!</h1>
<form action="">
<label for="first">First Name</label>
<input type="text" id="first" name="firstname" required />
<label for="last">Last Name</label>
<input type="text" id="last" name="lastname" required />
<hr />
<div>
<fieldset>
<legend>Select a Race :</legend>
<div>
<input type="radio" id="fun" name="type" value="fun" checked />
<label for="fun">Fun Run 5k</label>
</div>
<div>
<input type="radio" id="half" name="type" value="half" />
<label for="half">Half Marathon</label>
</div>
<div>
<input type="radio" id="full" name="type" value="full" />
<label for="full">Full Marathon</label>
</div>
</fieldset>
</div>
<hr />
<label for="email">Email : </label>
<input type="email" id="email" required />
<label for="pwd">Password : </label>
<input type="password" id="pwd" required />
<div>
<label for="group">Select Age Group : </label>
<select name="group" id="group">
<option value="a">18-30</option>
<option value="b">30-50</option>
<option value="c">50+</option>
</select>
</div>
<button>Register!</button>
</form>
</body>
</html>
'공부 기록 > HTML & CSS' 카테고리의 다른 글
| 간단한 실습(2) - Price Table (반응형 디자인과 reset CSS) (0) | 2023.01.18 |
|---|---|
| 간단한 실습(1) - Photo site (0) | 2023.01.18 |
| Button :hover (0) | 2023.01.18 |
| Table (0) | 2023.01.18 |
| HTML 기본 구조와 Semantic Elements (0) | 2023.01.18 |
