๋ฐ์ํ
HTML ํ์๊ฐ์ ํผ+ ํ ๋๋ฆฌ + ์์ด์ฝ ๋ง๋ค๊ธฐ!
์ ๋ฒ ํ์ ๊ฐ์ ํผ์ ์กฐ๊ธ ์์ฌ์์, ๋ณด๋ค ์์ฑ๋ ์๊ฒ ์๋ก ๋ง๋ค์ด๋ณด์๋ค.
์์ด์ฝ๋ ์ถ๊ฐํ๊ณ , ์์ด์ฝ์ ํด๋ฆญํ๋ฉด ํน์ ๋งํฌ๋ก ์ด๋ํ๊ฒ ํ๋ค.
* ์กฐ๊ธ ๋ ์์ฑ๋ ์๋ ํ์๊ฐ์ ํผ
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>
<h1>๋ด์ง์ค ํฌํด๋ฝ ํ์๊ฐ์
</h1>
</header>
<main>
<form>
<fieldset>
<legend><A href = "https://yangkong-tech.tistory.com/" target = "_blank"><img src="https://png.pngtree.com/png-vector/20191004/ourmid/pngtree-person-icon-png-image_1788612.jpg" width="50" height="50"></legend></A>
<input id="user_email" type="email" placeholder="์ด๋ฉ์ผ์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="user_name" type="text" placeholder="์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="user_password" type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="user_confirm_password" type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ๋ค์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input type='tel' name='userPhoneNumber' placeholder="010" maxlength="3" required /> -
<input type='tel' name='userPhoneNumber' placeholder="1234" maxlength="4" required /> -
<input type='tel' name='userPhoneNumber' placeholder="5678" maxlength="4" required />
<br>
000000
<br>
<button type="submit" class="pure-button pure-button-primary">์ธ์ฆ๋ฒํธ์ ์ก</button>
<br>
3:00
<br>
<button type="submit" class="pure-button pure-button-primary">์ธ์ฆํ์ธ</button>
<br>
<select>
<option size="1" disabled selected>์ต์ ๋ฉค๋ฒ๋ฅผ ์ ํํ์ธ์.</option>
<option>ํด๋ฆฐ</option>
<option>ํ๋</option>
<option>๋ฏผ์ง</option>
<option>๋ค๋์</option>
<option>ํ์ธ</option>
</select>
<br>
<input type="radio" value="female" name="gender" />์ฌ์ฑ
<input type="radio" value="male" name="gender" />๋จ์ฑ<br/>
<button type="submit" class="pure-button pure-button-primary">๊ฐ์
ํ๊ธฐ</button>
</fieldset>
</form>
</main>
<footer>
<br>
</footer>
</body>
</html>
๊ฒฐ๊ณผ
See the Pen NEW <form> by Kong Yang (@Kong-Yang) on CodePen.
๋ฐ์ํ
