2020. 10. 26. 15:12ใHTML & CSS ๐/HTML ์ฐ์ต
<form action="#" method="get">
<action>
์ ์ถ, ๋ก๊ทธ์ธ ๋ฑ ์์ฑํ form์ ์ ๋ณด๋ฅผ ์ด๋๋ก ๊ฐ ๋ณด๋ด์ผ ํ๋๋ฐ, ๋ณด๋ผ ์ฅ์(์๋ฒ)์ ์ฃผ์๋ฅผ ์ ๋ ฅํ๋ ๊ณณ์ด๋ค.
<method>
get- ์ ๋ณด๊ฐ ๊ฐ๋ ๋ฐฉ์. ์ ๋ณด๊ฐ ๊ฒ์๋์์ ๋, ๋๋ฉ์ธ ์ฃผ์ ์์ URL์ ๊ธธ๊ฒ ์ฃผ์๋ก ๋์ด๋๋ ๋ฐฉ์.
post- ์ ๋ณด๊ฐ ๊ฐ๋ ๋ฐฉ์. ์ ๋ณด๊ฐ ์ํธํ ๋์ด ํค๋์ ์ ์ก์ด ๋๋ค. (์ ๋ณด ์๋)
์ ๋ ฅ์ ํ์ง ์์ผ๋ฉด ๊ธฐ๋ณธ๊ฐ(default)์ get๋ฐฉ์์ด ๋๋ค
<input>
๊ฐ ํญ๋ชฉ์ ์์ฑํ๊ธฐ ์ํ ํ๊ทธ๋ก์, ์๋์ ์์ฑ๋ค๊ณผ ํจ๊ป ์ฌ์ฉํ๋ค.
- type : ์ด๋ ํ ํํ๋ก ์ฐ๋๊ฐ
๋ฌธ์์ผ ๊ฒฝ์ฐ "text" / ๋น๋ฐ๋ฒํธ ํํ(๋ณด์๋ฌธ์) "password" - name: input ํ๋์ ์ด๋ฆ์ด๋ค. ๋์ค์ ์๋ฒ์ ๊ฐ์ ๋ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ํด๋น ๊ฐ์ ํธ์ถํ์ฌ ์์๋ผ ์ ์๋ค.
- size: ์์์ ๊ฐ๋ก ํญ
- file: ์ฌ์ง์ด๋ ๋ฌธ์ ๋ฑ ํ์ผ์ ์ ํํ ์ ์๋ ๋ํ์์
- radio: ํ๋๋ง ์ ํํด์ผ ํ ๋ ์ด๋ค. ์ฑ๋ณ์ฒ๋ผ ์์ํ์ผ ํด์ผ ํ๋ ๊ฒฝ์ฐ, name ๊ฐ์ด ๋ ๊ฐ์ ์ ํ๊ฐ๊ณผ ๊ฐ์์ผ ํ๋ค. ํ์ง๋ง value๊ฐ์ ๋ค๋ฅด๊ฒ ํ๋ฉด ๋๋ค.
<input type="radio" name="gender" value="m"> ๋จ
<input type="radio" name="gender" value="w"> ์ฌ <br /> - checkbox: ์ฒดํฌ๋ฐ์ค๋ฅผ ๋ง๋ค์ด ์ฃผ๋ ํ๊ทธ
- checked: ํด๋น ํ์ด์ง๋ฅผ ์ด์์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฒดํฌ ๋์ด์๊ฒ ๋ง๋ค์ด ์ฃผ๋ ํ๊ทธ
<textarea>
๊ธ์์๋ฅผ ๋ง๋๋ ํ๊ทธ.
rows: ์ค ์๋ฅผ ์ค์ ํ๋ค.
cols: ๊ธ์ ์๋ฅผ ์ค์ ํ๋ค.
<select>
์ ํ์ง๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํ๋ฉฐ, ์๋์ ํ๊ทธ๋ก ์ ํ์ง๋ฅผ ์ค์ ํ๋ค.
- option ์ ํ์ง๋ฅผ ๋ง๋ ๋ค.
- multiple ์ฌ๋ฌ ๊ฐ๋ฅผ ์ ํํ ์ ์๊ฒ ๋ง๋ค๊ธฐ ์ํด์ ์ฌ์ฉํ๋ค.
์ค์ตํ๋ฉด
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="#" method="get">
์ด๋ฆ: <input type="text" name="uname" /><br />
์์ด๋: <input type="text" name="uid" /><br />
๋น๋ฐ๋ฒํธ: <input type="password" name="upw" /><br />
์ฐ๋ฝ์ฒ: <input type="text" name="uphone1" size="5"> - <input type="text" name="uphone2" size="5"> - <input type="text" name="uphone3" size="5"><br />
์ฌ์ง: <input type="file" name="upic"/><br />
์ฑ๋ณ๊ตฌ๋ถ: <input type="radio" name="gender" value="m"> ๋จ
<input type="radio" name="gender" value="w">์ฌ <br />
์ฌ์ฉ์ธ์ด: <input type="checkbox" name="ian" value="kor" checked="checked" /> ํ๊ตญ์ด
<input type="checkbox" name="ian" value="eng" /> ์์ด
<input type="checkbox" name="ian" value="jap" /> ์ผ์ด
<input type="checkbox" name="ian" value="chi" /> ์ค๊ตญ์ด<br />
์๊ธฐ์๊ฐ : <textarea rows="5" cols="20"> ๊ฐ๋จํ๊ฒ ์
๋ ฅํ์ธ์. </textarea> <br />
๊ตญ์ :
<select>
<option>Kroea</option>
<option>USA</option>
<option>CHINA</option>
<option>JAPAN</option>
</select><br />
์ข์ํ๋ ์์:
<select multiple="multiple">
<option>๊น์น</option>
<option>๋น๋น๋ฐฅ</option>
<option>์นํจ</option>
<option>ํ์ </option>
<option>๋ญ๊ฐ๋น</option>
</select><br />
<input type="submit"/>
</form>
</body>
</html>
๊ฒฐ๊ณผ ํ๋ฉด
'HTML & CSS ๐ > HTML ์ฐ์ต' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
lable ํ๊ทธ์ input ํ๊ทธ ์ ๋ฆฌ (0) | 2020.10.28 |
---|---|
3์ผ์ฐจ ๋ ์ด์์ ๊ตฌ์ฑ ํ๊ทธ div / span , div๋ฅผ ์ด์ฉํ ๋ ์ด์์ ๊ตฌ์ฑ (0) | 2020.10.26 |
3์ผ์ฐจ ๊ฐ์ธ์ฐ์ต Video ํ๊ทธ ๋ฐ html ์ฝํ ์ธ ๋ชจ๋ธ (0) | 2020.10.26 |
2์ผ์ฐจ img ์ด๋ฏธ์ง ํ๊ทธ / audio ์๋ฆฌ ํ๊ทธ (0) | 2020.10.24 |
2์ผ์ฐจ table ํ๊ทธ (0) | 2020.10.24 |
2์ผ์ฐจ ๋ฆฌ์คํธ ํ๊ทธ <li>, <ol>, <ul>,<dl>,<dd>,<dt>,<a href=" > (0) | 2020.10.24 |