ํผ ์ฝ์ ํ๊ธฐ
ํผ
- ์น์ฌ์ดํธ์์ ์ฌ์ฉ์์๊ฒ ์ ๋ณด๋ฅผ ๋ฐ์๋ค์ด๊ธฐ ์ํ ํ์(์ฌ์ฉ์ ์ ๋ณด๋ฅผ ์ ๋ ฅํ ์ ์๊ฒ ๋ง๋ ํ์)
- ex) ๊ฒ์์ฐฝ, ๋ก๊ทธ์ธ ์ฐฝ(์์ด๋, ๋น๋ฐ๋ฒํธ, ์ธ์ด๋ณ๊ฒฝ, ํ์ธ ๋ฒํผ ๋ฑ)
- <form> ~ </from> ์ฌ์ฉ
- ์น๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ๋ก ๋๊ฒจ์ฃผ๋ ์ญํ ๋ง, ์๋ฒ์ ์๋ ํ๋ก๊ทธ๋จ์ด ์ง์ ์ฒ๋ฆฌ
- action="์คํํ ํ๋ก๊ทธ๋จ ์ด๋ฆ"
- ํ๋์ ํผ ์์ ์ฌ๋ฌ ๊ตฌ์ญ ๋๋์ด ํ์: <fieldset> ํ๊ทธ ์ฌ์ฉ
- <legend> ํ๊ทธ๋ <fieldset> ํ๊ทธ๋ก ๋ฌถ์ ๊ทธ๋ฃน์ ์ ๋ชฉ์ ๋ถ์ผ ์ ์์
<fieldset [์์ฑ="์์ฑ๊ฐ"]></fieldset>
<fieldset>
<legend>๊ทธ๋ฃน ์ด๋ฆ</legend>
</fieldset>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์น ํผ ์ฝ์
ํ๊ธฐ</title>
</head>
<body>
<form action="">
<ul>
<li>
<label for="user-id">์์ด๋ : </label> <!--๋ ์ด๋ธํ๊ทธ ๋ฐ๋ก ์ฌ์ฉ-->
<input type="text">
</li>
<li>
<label>๋น๋ฐ๋ฒํธ : <input type="password"></label>
</li>
<li>
<input type="submit" value="๋ก๊ทธ์ธ"> <!--๋ก๊ทธ์ธ ๋ฒํผ-->
</li>
</ul>
</form>
</body>
</html>
- <label> ํ๊ทธ๋ <input> ํ๊ทธ์ ๊ฐ์ ํผ ์์์ ๋ ์ด๋ธ์ ๋ถ์ผ ๋ ์ฌ์ฉ
์์ 2 (๋๋ณด๊ธฐ ํด๋ฆญ)
๋๋ณด๊ธฐ
name์ ๊ฐ๊ฒ ํด์ค์ผ ํ๋๋ง ๊ฐ์ ์ ํํ ์ ์์(๊ฐ์ ๊ทธ๋ฃน, ๋ฌถ์ ์ด๋ผ๋ ๊ฒ์ ์๋ ค์ค์ผํจ)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>๋ ๋ํฅ ์ฃผ๋ฌธํ๊ธฐ</title>
</head>
<body>
<h1>๋ ๋ํฅ ์ฃผ๋ฌธํ๊ธฐ</h1>
<form>
<fieldset>
<legend>์ํ ์ ํ</legend>
<p><b>์ฃผ๋ฌธํ ์ํ์ ์ ํํด ์ฃผ์ธ์.</b></p>
<ul>
<li>
<label><input type="checkbox" value="s_3">์ ๋ฌผ์ฉ 3kg</label>
<input type="number">๊ฐ
</li>
<li>
<label><input type="checkbox" value="s_5">์ ๋ฌผ์ฉ 5kg</label>
<input type="number">๊ฐ
</li>
<li>
<label><input type="checkbox" value="f_3">๊ฐ์ ์ฉ 3kg</label>
<input type="number">๊ฐ
</li>
<li>
<label><input type="checkbox" value="f_5">๊ฐ์ ์ฉ 5kg</label>
<input type="number">๊ฐ
</li>
</ul>
<p><b>ํฌ์ฅ ์ ํ</b></p>
<ul>
<li><label><input type="radio" name="gift" value="yes" >์ ๋ฌผ ํฌ์ฅ</label></li>
<li><label><input type="radio" name="gift" value="no">์ ๋ฌผ ํฌ์ฅ ์ ํจ</label></li>
</ul>
</fieldset>
<fieldset>
<legend>๋ฐฐ์ก ์ ๋ณด</legend>
<ul>
<li>
<label for="user-name">์ด๋ฆ </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">๋ฐฐ์ก ์ฃผ์</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">๋ฉ์ผ ์ฃผ์</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">์ฐ๋ฝ์ฒ</label>
<input type="tel" id="phone">
</li>
</ul>
</fieldset>
</form>
</body>
</html>โ
<label><input type="checkbox" value="s_3">์ ๋ฌผ์ฉ 3kg</label>
<input type="number">๊ฐ
์์ value๊ฐ ์ค์ ์ ์ก๋๋ ์ฝ๋.
์ ๋ฌผ์ฉ 3kg์ ์ ํํ์ผ๋ vlaue="s_3" ์ฆ, 3์ด ์ ์ก๋จ<li><label><input type="radio" name="gift" value="yes" >์ ๋ฌผ ํฌ์ฅ</label></li>
<li><label><input type="radio" name="gift" value="no">์ ๋ฌผ ํฌ์ฅ ์ ํจ</label></li>
์ซ์ ์ ๋ ฅํ๊ธฐ
<!--์๋ต-->
<body>
<h1>๋ ๋ํฅ ์ฃผ๋ฌธํ๊ธฐ</h1>
<form>
<fieldset>
<legend>์ํ ์ ํ</legend>
<p><b>์ฃผ๋ฌธํ ์ํ์ ์ ํํด ์ฃผ์ธ์.</b></p>
<ul>
<li>
<label><input type="checkbox" value="s_3">์ ๋ฌผ์ฉ 3kg</label>
<input type="number" min="0" max="5">๊ฐ (์ต๋ 5๊ฐ)
</li>
<li>
<label><input type="checkbox" value="s_5">์ ๋ฌผ์ฉ 5kg</label>
<input type="number" min="0" max="3" value="1">๊ฐ (์ต๋ 3๊ฐ)
</li>
</ul>
<ul>
<li>
<label><input type="checkbox" value="f_3">๊ฐ์ ์ฉ 3kg</label>
<input type="range" min="0" max="5">๊ฐ (์ต๋ 5๊ฐ)
</li>
<li>
<label><input type="checkbox" value="f_5">๊ฐ์ ์ฉ 5kg</label>
<input type="range" min="0" max="3" value="1">๊ฐ (์ต๋ 3๊ฐ)
</li>
</ul>
<p><b>ํฌ์ฅ ์ ํ</b></p>
<ul>
<li><label><input type="radio" name="gift" value="yes">์ ๋ฌผ ํฌ์ฅ</label></li>
<li><label><input type="radio" name="gift" value="no">์ ๋ฌผ ํฌ์ฅ ์ ํจ</label></li>
</ul>
</fieldset>
<!--์๋ต-->
- number : ํ์ดํ ์, ์๋๋ก ๊ฐ ์ง์
- range : ์ฌ๋ผ์ด๋ ๋ง๋๋ก ๊ฐ ์ง์
- min, max : ๊ฐ ์ต์, ์ต๋ ์ง์
- value = "์ซ์" : ๊ฐ ํ์ํ๋ ์ด๊ธฐ๊ฐ ์ง์
๋ ์ง/์๊ฐ ์ง์ ํ๊ธฐ, ๋ฒ์ ์ ํํ๊ธฐ
<body>
<form>
<h1>๋ ์ง ์ง์ ํ๊ธฐ</h1>
<input type="date">
<input type="month">
<input type="week">
<hr>
<h1>์๊ฐ ์ง์ ํ๊ธฐ</h1>
<input type="time">
<input type="datetime-local">
<hr>
<h1>๋ฒ์ ์ ํํ๊ธฐ</h1>
<input type="date" min="2020-02-01" max="2020-02-15">
<input type="time">
</form>
</body>
- type ์์ ์ฌ๋ฌ๊ฐ์ง ์ธ ์ ์์
Can I use... Support tables for HTML5, CSS3, etc : ํ๊ทธ ์ข ๋ฅ ์ ์ ์์(์ด๋ก: ์ง์, ํฉ๊ฐ์: ๋ถ๋ถ์ง์, ๋นจ๊ฐ: ์ง์X)
type="hidden"
ํ๋ ํ๋: ์น ๋ธ๋ผ์ฐ์ ์์๋ ๋ณด์ด์ง ์์ ์ฌ์ฉ์๊ฐ ์ ์ ์์ง๋ง, ์ ๋ ฅํ ์ ๋ณด์ ํจ๊ป ํ๋ ํ๋์ ๋ด์ฉ์ด ์๋ฒ๋ก ๋ณด๋ด์ง
input ํ๊ทธ์ ์ฃผ์ ์์ฑ
<!--์๋ต-->
<body>
<h1>๋ ๋ํฅ ์ฃผ๋ฌธํ๊ธฐ</h1>
<form>
<fieldset>
<legend>๋ฐฐ์ก ์ ๋ณด</legend>
<ul id="shipping">
<li>
<label for="prod">์ฃผ๋ฌธ ์ํ</label>
<input type="text" id="prod" value="์ํ์ฉ 3KG" readonly>
</li>
<li>
<label for="user-name">์ด๋ฆ </label>
<input type="text" id="user-name" autofocus required>
</li>
<li>
<label for="addr">๋ฐฐ์ก ์ฃผ์</label>
<input type="text" id="addr" required>
</li>
<li>
<label for="mail">์ด๋ฉ์ผ</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">์ฐ๋ฝ์ฒ</label>
<input type="tel" id="phone" placeholder="ํ์ดํ ๋นผ๊ณ ์
๋ ฅํด ์ฃผ์ธ์.(01012345678)" required>
</li>
<li>
<label for="d-day">๋ฐฐ์ก ์ง์ </label>
<input type="date" id="d-day"> <small>(์ฃผ๋ฌธ์ผ๋ก๋ถํฐ ์ต์ 3์ผ ์ดํ)</small>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="์ฃผ๋ฌธํ๊ธฐ">
<input type="reset" value="์ทจ์ํ๊ธฐ">
</div>
</form>
</body>
<!--์๋ต-->
- required ์์ฑ: ์ค์ํ ํ๋(ํ์ ํ๋)๋ผ๊ณ ์๋ ค์ค
- readonly ์์ฑ: ํ ์คํธ ํ๋์ ์์ง๋ง ์ง์ฐ์ง ๋ชปํ๊ฒ ๊ณ ์ (์ฝ๊ธฐ ์ ์ฉ ํ๋)
- autofocus ์์ฑ: ์๋์ผ๋ก ํฌ์ปค์ค ๋ง์ถฐ ์ปค์ ๊น๋นก์
<textarea id="memo" cols="40" rows="4"></textarea>
- <textarea> ํ๊ทธ: ์ฌ๋ฌ ์ค ์ ๋ ฅ
- ํ๋ฉด์ ํ์๋๋ ํ(rows), ๋ ฌ(cols)(๋๋ต ์๋ฌธ40, ํ๊ธ20์ ๋(๊ธ๊ผด, ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง))
<select>
<option value="special_3" selected>์ ๋ฌผ์ฉ 3kg</option>
<option value="special_5">์ ๋ฌผ์ฉ 5kg</option>
<option value="family_3">๊ฐ์ ์ฉ 3kg</option>
<option value="family_5">๊ฐ์ ์ฉ 5kg</option>
</select>
- <select> ํ๊ทธ: ํญ๋ชฉ ์ ํ
- selected ์์ฑ: ๊ธฐ๋ณธ ์ง์
- ์ ํํ๋ฉด value ๊ฐ์ด ์๋ฒ๋ก ๋์ด๊ฐ(value ์์ฑ ๊ฐ)
Do it! HTML+CSS+์๋ฐ์คํฌ๋ฆฝํธ ์น ํ์ค์ ์ ์
์์คํ์ผ: http://www.easyspub.co.kr/30_Menu/DataList/PUB#2
'Study > HTML | CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[04] ์น ๋ฌธ์์ ๋คํฅํ ๋ด์ฉ ์ ๋ ฅํ๊ธฐ (0) | 2023.02.22 |
---|---|
[03] HTML ๊ธฐ๋ณธ ๋ฌธ์ ๋ง๋ค๊ธฐ (0) | 2023.01.16 |
[01/02] ์น ๊ฐ๋ฐ ์์ ์ (0) | 2023.01.16 |