λ°μν
νμκ°μ νΌ λ§λ€κΈ° <form> <input>
<form> κ³Ό <input> μ ν΅ν΄ μμμ λ§λ€ μ μλ€.
<input>μ νμ μ μ§μ ν΄μ£Όλ©΄ λ€μνκ² νμ©μ΄ κ°λ₯νλ€.
π <input>μ λ«λ νκ·Έκ° λ°λ‘ μμ΄λ λλ€.
* μ‘°κΈ λ μμ±λ μλ λ²μ μ νμκ°μ νΌ
λ§ν¬1 νμκ°μ νΌ+ ν λ리 + μμ΄μ½ (ν΄λ¦)
λ§ν¬2 HTML κ³Ό CSSλ‘ νμκ°μ νΌ λ§λ€κΈ° + κ·Έλ¦Όμν¨κ³Ό λ£κΈ° (ν΄λ¦)
μ½λ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ν¬ν΄λ½ νμκ°μ
</title>
</head>
<body>
<header> <!--header,main,footerλ‘ μ 리νλ©΄ μ’λ€-->
<h1>ν¬ν΄λ½ νμκ°μ
</h1>
</header>
<main>
<form>
<div><label>μμ΄λ : </label></div>
<input id="user_id" type="text" maxlength="10" required />
<div><label>λΉλ°λ²νΈ : </label></div>
<input id="user_pw" type="password" maxlength="10" placeholder="8κΈμμ΄μ" required />
<div><label>μ΄λ©μΌ : </label></div>
<input id="user_email" type="email" required />
<div><label for="user_age">λμ΄ :</label></div>
<input id="user_age" type="number" min="20" max="40" required />
<hr/>
<input type="radio" value="female" name="gender" />μ¬μ±
<input type="radio" value="male" name="gender" />λ¨μ±<br/>
<input type="submit" disabled />
<input type="reset" />
</form>
</main>
<footer>
<p>νμκ°μ
νμλ©΄ μΆμ²¨μ ν΅ν΄ μ¬μνμ λ립λλ€.</p>
</footer>
</body>
</html>
κ²°κ³Ό
See the Pen <form> <input> by Kong Yang (@Kong-Yang) on CodePen.
λ°μν