HTML Form 속성(Attribute)

* HTML Form

The HTML <form> element defines a form that is used to collect user input:

Form elements are different types of input elements, like text fields, checkbox, radio buttons, submit buttons, and more.

HTML폼은 웹사이트 또는 어플리케이션이 서로 상호작용하는데 있어 중요한 기술 이다.

폼은 사용자가 웹사이트로 데이터를 전송하는 것을 허용한다.

(폼을 디자인 할때는 사용자 경험(UX)의 관점에서 반드시 필요한게 무엇인지 생각하며 간단히 유지하는게 좋다.)

<form> 속성(Attribute)

폼을 동작시키기 위해선 일부 속성들을 지정해야 한다. 선택적인 여러 속성중에 action 속성과 method 속성은 필수적으로 설정해야 한다. <form>요소는 action속성과 method속성을 사용하여 데이터를 어디에 어떻게 보낼지 정의한다.(서버측에서 데이터를 다룰 수 있게 하기위해, data의 이름을 지정하려면 데이터를 받는 각 폼 속성에 name속성을 지정해야 한다.)

- action속성 : 데이터를 보낼 URL 지정

- method속성 : 어떤 HTTP 방식*을 사용할 것인지 지정.(GET이나 POST)

<form action="/action_page.php"  method="post">
    <div>
        TEST : <input type="text" id="name" name="user_name" />
    </div>
    <div>
        TEST : <input type="email" id="email" name="user_email" />
    </div>
 
    <div class="button">
        <button type="submit">Insert Your Data</button>
    </div>
</form>

데이터 이름 : user_name, user_email.

이 데이터들은 /action_page.php로 HTTP POST방식으로 전송된다.

*  The Name Attribute

각각의 input field는 submit이 되기 위해 반드시 name속성을 가지고 있어야 한다.

 만약 name속성이 누락되면, input field의 data는 보내지지 않는다.

테스트소스

<form action="/action_page.php">
First  : <input type="text" value="test01"><br>
Second : <input type="text" vlaue="test02" name="test02">
 
<inptu type="submit" value="Submit">
 
</form>

>>>>> 결과적으로 Second 필드의 값만 전달된다.

The Action Attribute	<form action="/action_page.php">
The Target Attribute	<form action="/action_page.php" target="_blank">
The Submit Button	<input type="submit">
The Action Attribute	<form action="/action_page.php">
The Target Attribute	<form action="/action_page.php" target="_blank">
* The Method Attribute :	The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: <form action="/action_page.php" method="get"> <form action="/action_page.php" method="post">
Grouping Form Data with <fieldset>

참고 : www.w3school.com

https://developer.mozilla.org/ko/docs/Learn/HTML/Forms/Your_first_HTML_form