forms ์์
document.forms ๊ฐ์ฒด
HTMLCollction ๊ฐ์ฒด๋ก <form> ์์๋ ํผ์ ์ด๋ฆ์ด๋ ์ธ๋ฑ์ค๋ฅผ ์ด์ฉํ์ฌ ์ ๊ทผํ๋ค.
๊ฐ์ฒด๋ฅผ ์ด์ฉํ์ฌ <form> ์์์ ๊ฐ์ฒด
<form>์ด๋ผ๊ณ ํ๋ ๊ฒ์ ์ ์ฌ ๋ฐฐ์ด์ด๋ผ๊ณ ์๊ฐํ๋ฉด ํธํ๋ค.
form ์ฃผ์ ์์ฑ ๋ฐ ๋ฉ์๋
์ฃผ์ ์์ฑ | ์ค๋ช |
elemennts | FORM ์์์ ๋ด๊ธด ๋ชจ๋ form ์ปจํธ๋กค(control) ๋ฐฐ์ด์ ๋ฐํํ๋ค. |
length | FORM ์์์ ์ปจํธ๋กค ์๋ฅผ ๋ฐํํ๋ค. |
name | ํ์ฌ FORM ์์ ์ด๋ฆ์ ๋ฌธ์์ด๋ก ๋ฐํํ๋ค. |
action | FORM ์์์ action์ ์ค์ ํ๊ฑฐ๋ ๋ฐํ ๋ฐ๋๋ค. |
enctype | FORM ์์์ contentType์ ์ค์ ํ๊ฑฐ๋ ๋ฐํ ๋ฐ๋๋ค. encoding ์์ฑ๊ณผ ๋์ผํ๋ค. |
method | FORM ์์์ HTTP method๋ฅผ ์ค์ ํ๊ฑฐ๋ ๋ฐํ ๋ฐ๋๋ค. |
์ฃผ์ ๋ฉ์๋ | ์ค๋ช |
submit() | ์๋ฒ์ ํผ์ ์ ์กํ๋ค. |
reset() | ํผ์ ์ด๊ธฐ์ํ๋ก ์ฌ์ค์ ํ๋ค. |
document.forms ๊ฐ์ฒด๋ฅผ ์ด์ฉํ <form> ์์ ์ ๊ทผ
document.forms[์ธ๋ฑ์ค]
document.forms["ํผ์ด๋ฆ"]
๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
action์ด ์๋ name ์์ฑ์์ ์ ์
id์ class๋ ๋์์ธ์ ์ํด ์ฌ์ฉํ๋ ๊ฒ์ด๊ณ , name์ ์๋ฒ์์ ์ฌ์ฉํ๊ธฐ ์ํ ๊ฒ์ด๋ฏ๋ก name์ ์ค ๊ฒ!
action ๊ณผ submit
<form name="myForm" action="request.jsp" method="post">
<p>์ด๋ฆ : <input type="text" name="name"></p>
<p>๊ณผ๋ชฉ : <input type="text"></p>
<p>์ ์ : <input type="text" name="score"></p>
<!-- name ์์ฑ์ด ์์ผ๋ฉด ์๋ฒ์์ ๋ฐ์ ์ ์๋ค(subject)-->
<p>
<button type="submit">์๋ฒ๋ก ์ ์ก</button>
<button>์๋ฒ๋ก ์ ์ก</button>
<button type="button" onclick = "send();">์๋ฒ๋ก ์ ์ก ์ ๋จ</button>
</p>
</form>
1) action
form ์์๋ฆ ๋ด์ฉ์ ์๋ฒ๋ก ์ ์กํ ๋ ์ ์กํ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์๋ฒ ์ฃผ์๋ฅผ ์๋ฏธํ๋ค.
2) <input> ํ๊ทธ์ name ์ ์ฌ์ฉํด์ผ ํ๋ค.
name์ ์ฌ์ฉํ์ง ์์ผ๋ฉด ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ์ ์๋ค.
id๋ class๋ฅผ ์ฌ์ฉํ์ง ์๋๋ก ์ฃผ์ํด์ผ ํ๋ค.
3) <button> ํ๊ทธ์ submit ๋ฒํผ์ ์ฌ์ฉํ๋ฉด ๋ฐ์ดํฐ๊ฐ ์๋ฒ๋ก ์ ์ก๋๋ค.
์ผ๋ฐ ๋ฒํผ์ ์๋ฒ๋ก ์ ์ก๋์ง ์๋๋ฐ ์ผ๋ฐ ๋ฒํผ์ ์๋ฒ๋ก ์ ์กํ๊ณ ์ถ๋ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ์ submit() ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
image ๋ฒํผ๋ submit ๋ฒํผ์ด๋ฏ๋ก ์ฃผ์ํด์ผ ํ๋ค.
์ผ๋ฐ ๋ฒํผ์ ์๋ฒ๋ก ์ ์กํ๊ณ ์ถ๋ค๋ฉด? ๐ค
<button type="button" onclick = "send();">์๋ฒ๋ก ์ ์ก ์ ๋จ</button>
<script type="text/javascript">
function send(){
const f = document.myForm;
f.submit(); // submit ๋ฒํผ์ด ์๋ button ๋ฑ์ผ๋ก ์๋ฒ๋ก ์ ์กํ ๋ ํธ์ถ
// submit ๋ฒํผ์์ submit() ํจ์๋ฅผ ํธ์ถํ๋ฉด ์๋ฒ๋ก ๋ ๋ฒ ์ ์ก๋๋ค. (DB์ ์์
ํ๋ฉด ๋ ๋ฒ ์ ์ฅ๋จ)
}</script>
enctype
name
was (tomcat) ์ด ์ด๋ฐ ํํ๋ก ๋ณํ์ ํด์ค๋ค.
htmlCollection ์ธํฐํ์ด์ค
action() ์๋ฒ์ผ ์ฃผ์
submit() ์๋ฒ์ ํผ์ ์ ์ก
์ค์
'๐ปProgramming > ๐โโ๏ธJavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] 09. DOM (0) | 2022.09.26 |
---|---|
[JavaScript] 08. ์ ๊ท์ (0) | 2022.09.26 |
[JavaScript] 06. ์ด๋ฒคํธ - MouseEvent (0) | 2022.09.23 |
[JavaScript] 06. ์ด๋ฒคํธ - KeyboardEvent (1) | 2022.09.22 |
[JavaScript] 06. ์ด๋ฒคํธ (0) | 2022.09.22 |