ํผ ํ๊ทธ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ๋ ์ฌ์ฉ๋๋ฉฐ, ํ๊ทธ ๋ด์์ ์ด๋ค ๊ณณ์ผ๋ก ๋ณด๋ผ์ง, ์ด๋ค ๋ฐฉ์์ผ๋ก ๋ณด๋ผ์ง ์ ์ด์ฃผ์ฌ์ผ ํ๋ค.
<h1>์ฒซ๋ฒ์งธ ํผ(form, input)</h1>
<!-- action -> url-->
<!-- form ํ๊ทธ๋ action๊ณผ method๊ฐ ํ์ -->
<form action="/member/login.do" method="get">
ID : <input type="text" placeholder="์์ด๋๋ฅผ ์
๋ ฅํ์ธ์"><br>
PW : <input type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์"><br>
<input type="submit" value="๋ก๊ทธ์ธ">
<input type="reset" value="์ทจ์">
</form>
ํผ ํ๊ทธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก <form>
ํ๊ทธ ์๋์ <input>
ํ๊ทธ๋ฅผ ์ ๋ ๊ตฌ์ฑ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.
<form>
ํ๊ทธ๋ action๊ณผ method
์์ฑ์ ํ์๋ก ๊ฐ์ ธ์ผ ํ๋ค. (๊ด๋ จ ์ค๋ช
์ ์๋์์ ํ๋ค.)
ํผ ์์๋ฅผ ๋ํ๋ด๊ธฐ ์ํด์๋ <input>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ค. <input>
ํ๊ทธ์๋ ๋ค์ํ type=""
์ด ์กด์ฌํ๊ณ , ์ด type
์ผ๋ก ํ์์ ํํํ ์ ์๋ค.
์์ด๋๋ฅผ ์
๋ ฅํ์ธ์. ๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์. ์ ๊ฐ์ด ๋น์ด์๋ ์
๋ ฅ์ฐฝ์ ๊พธ๋ฉฐ์ฃผ๋ ์์ฑ์ placeholder=""
์ด๋ค.
๐ก input type
- text : ๊ฐ์ฅ ํ๋ฒํ input type์ผ๋ก, ๋ชจ๋
text
๋ฅผ ์ ๋ ฅํ ์ ์๋ค.- password : ๋น๋ฐ๋ฒํธ๋ฅผ ์์ฑํ ๋ ๋ง์ด ์ฌ์ฉํ๋ type์ผ๋ก, text์ ๋ค๋ฅด๊ฒ
*
๋โข
๋ก ํํํ๋ค.- submit : ํผ์
์ ์ถ
ํ๋๋ฒํผ
์ด๋ค.value
๊ฐ์ผ๋ก ๋ฒํผ์ ๊ธ์ ์ค ์ ์๋ค.- reset : ํผ์
์ด๊ธฐํ
ํ๋๋ฒํผ
์ด๋ค.value
๊ฐ์ผ๋ก ๋ฒํผ์ ๊ธ์ ์ค ์ ์๋ค.
<!-- method : get -> ๊ฐ์ด ๋ค ๋ณด์ / post -> ๊ฐ์ด ์๋ณด์ -->
<!--
method ๋ฐฉ์
1. get : url ์ ์
๋ ฅํ ๊ฐ์ด ๋ณด์. ๋ณด์ด๊ฒ ๋ณด๋
2. post : ์๋ณด์ด๊ฒ ๋ณด๋(1์ฐจ์ ์ผ๋ก)
-->
<form action="/member/login.do", method="post">
<fieldset>
<!-- ํผ ํ๊ทธ ํ
๋๋ฆฌ -->
<legend>๋ก๊ทธ์ธ ์ ๋ณด</legend>
<!-- input์ name ์จ์ฃผ๊ธฐ -->
ID : <input type="text" name="user-id"><br>
PW : <input type="password" name="user-pw"><br>
<input type="submit" value="๋ก๊ทธ์ธ">
<input type="reset" value="์ทจ์">
</fieldset>
</form>
<fieldset>
์์๋ ํผ์ ์ฌ๋ฌ ์ปจํธ๋กค๊ณผ <label>
์ ๊ทธ๋ฃน์ผ๋ก ๋ฌถ์ ๋
์ฌ์ฉํ๋ค.
<legend>
๋ ๋ฌถ์ ํผ ํ๊ทธ๋ค์ ํ๋์ ํ
๋๋ฆฌ
๋ก ๊ฐ์ธ, ์ด๋ฆ
์ ์ง์ ํ์ฌ ๋ณด์ฌ์ค๋ค.
์์ ์ฌ์ง์ placeholder
๊ฐ ์์ด ๋ฌธ๊ตฌ๊ฐ ์ ํ์์ง ์๋ค.
method="get"
์ ์ ์ก๋ url์ ์์ ์ด ์
๋ ฅํ ๊ฐ์ด ๋ค ๋ณด์ด๋๋ก ๋ณด๋ด๋ ๋ฐฉ์์ด๋ค. ๋ฐ๋ผ์ ์์ฒ๋ผ id๋ pw๋ฅผ get ๋ฐฉ์์ผ๋ก ๋ณด๋ด๋ ๊ฑด ์ข์ง ์์ ์ ์๋ค.
๋ฐ๋ฉด method="post"
๋ ์
๋ ฅํ ๊ฐ์ด (1์ฐจ์ ์ผ๋ก๋) ๋ณด์ด์ง ์๋๋ก ๋ณด๋ด๋ ๋ฐฉ์์ด๋ค.
<form action="์ด๋ ๊ณณ์ผ๋ก(url)" method="์ด๋ค ๋ฐฉ์์ผ๋ก">
text : <input type="text" name="user-id"><br>
password : <input type="password" name="user-pw"><br>
submit : <input type="submit" value="์ ์ถ"><br>
reset : <input type="reset" value="์ด๊ธฐํ">
<hr>
<!-- checkbox : ์ค๋ณต์ ํ / radio : ๋จ์ผ์ ํ (name๊ฐ์ ๋ง์ถฐ์ค์ผํจ) -->
checkbox : <input type="checkbox">HTML5
<input type="checkbox">CSS3
<input type="checkbox">Javascript
<input type="checkbox">jQuery <br>
radio button : <input type="radio" name="gender">๋จ
<input type="radio" name="gender">์ฌ <br>
button : <input type="button" value="BUTTON"> <br>
<hr>
file : <input type="file"> <br> <!-- ํ์ผ ์ฒจ๋ถ -->
hidden : <input type="hidden"> <br> <!-- ์ฌ์ฉ์์๊ฒ๋ ๋ณด์ด์ง ์๋, ๊ฐ๋ฐ์๊ฐ ์ฌ์ฉํ๋ ๊ฐ -->
date : <input type="date"> <br>
datetime : <input type="datetime-local" > <br> <!-- date + ์๊ฐ๊น์ง ํํ -->
number : <input type="number" max="10" min="5"> <br>
search : <input type="search"> <br>
email : <input type="email"><br> <!-- ์ด๋ฉ์ผ ํ์ @ ํ์ธ -->
range : <input type="range" max="10" min ="0" value="7"> <br>
week : <input type="week"> <br>
textarea : <textarea rows="5" cols="30"></textarea> <br>
</form>
๐ก input type
- checkbox :
์ค๋ณต ์ ํ์ด ๊ฐ๋ฅ
ํ๋ค(โก)- radio :
์ค๋ณต ์ ํ์ด ๋ถ๊ฐ๋ฅ
ํ๋ค(โ)- file :
ํ์ผ ์ ํ
๋ฒํผ์ ํตํดํ์ผ ์ฒจ๋ถ
๊ฐ ๊ฐ๋ฅํ๋ค.- date :
์ฐ๋-์-์ผ
- datetime-local : date +
์๊ฐ
- number : ์ซ์๋ฅผ ์กฐ์ ํ๋ ๋ฐ๊ฐ ์๊ธด๋ค.
max
์min
๊ฐ์ ์ง์ ํด ์ค ์ ์๋ค.- email :
์ด๋ฉ์ผ์ ํ์
์ ์ง์ผ์ผ ํ๋ค(@). ํ์์ ์งํค์ง ์์ผ๋ฉด ์ด๋ฉ์ผ ์ฃผ์์ @๋ฅผ ํฌํจํด๋ฌ๋ผ๋ ์ฃผ์๋ฌธ๊ตฌ๊ฐ ๋จ๊ฒ ๋๋ค.- textarea : ๋ฉํฐ๋ผ์ธ ์ผ๋ฐ ํ ์คํธ ํธ์ง ์ปจํธ๋กค์ด๋ค.
rows
์cols
๋ก ์์ญ์ ํฌ๊ธฐ๋ฅผ ์ง์ ํด ์ค ์ ์๋ค.