HTML Form

 HTML Form application can be said to be an indispensable part of interactive web design. If it is just a simple corporate website, contact forms may also be used. Therefore, we have to spend some time studying the elements of HTML Form. We will design web pages in the future. It helps a lot. HTML form is composed of a set of <form></form>, which can contain various text input fields, menus and form buttons ( HTML button ). The simple form structure is as follows.

HTML form form structure

<form action="send destination" method="data transmission method">
... form content...
</form>

Common HTML form form elements

1. Text input field <input type="text"> 

The input field of the form <input type="text">, such an input tag will An input box is displayed on the page, which is used to fill in information for netizens, such as the account password for member login or the name, phone number, and address of the online registration form.

2. Password input field <input type="password">

 The password input field, as its name implies, is for users to enter passwords. The difference with text is that password will automatically hide what users enter The content, to avoid being seen by other people next to you while entering the password, but it can only guard against gentlemen, not villains, and it seems to have no effect on keylogger software.

3. Text input field <textarea></textarea> 

The text input field <textarea></textarea> is different from <input type="text"> in that it can be entered in multiple lines, and is usually The netizen fills in more information, such as what the netizen wants to say or the entire text, and when the length of the text entered by the netizen is longer, <textarea></textarea> The scrollbar can be automatically generated for the netizens to pull by themselves. The scrollbar can control the display status and display style through CSS syntax.

4. Drop-down menu <select><option></option></select> 

<select></select> presents a drop-down menu of an HTML form. For example, date selection or shopping product specifications are common applications, where <option> is an option, which can be set For the options of the drop-down menu, each option gives a different value. After the form is sent, the program will get the user’s choice.

5. Option buttons Radio Buttons <input type="radio"> 

Radio Buttons <input type="radio"> are usually a set of options, so that netizens can only choose one of them , The trick to make a group is to set the name of the entire group <input type="radio"> to be the same, so that the form will automatically be judged as a whole group.

6. Checkboxes <input type="checkbox"> 

Checkboxes and radio buttons are used in different places. Checkboxes are usually used to make forms with multiple options. For example, when netizens fill in their personal interests, they can check many items. Checkboxes did it.

7, form button HTML button 

After the above various form elements, the most important thing is to have a form button. As an important task for form sending, the form button button can be used as a form sending function In addition, you can also use JavaScriptCreate a function to clear the contents of the form!

8. Hidden fields input hidden

Hidden fields are used to pass some form parameters and will not be displayed on the web page.

HTML Form example

<form action="test.php" method="post">
　Name: <input type="text" name="UserName"><br>
　Content: <textarea name="Content"></textarea><br>
　<input type="submit" value="Submit Form">
</form>

The above example presents the results

Name:
content:

In this example, we set action="test.php" and method="post" to mean that when the user presses the button to send the form, the form will send the form data to the text.php program through the post method , And for the content of the form, we put two fields of name and content, and use <input type="text"> and <textarea> to let netizens fill in.

HTML Form form data transmission

After you have completed the design of the HTML Form form, the most important thing is of course the data processing after sending the form data. Usually we will use a programming language such as PHP to process and store it in the database, such as MySQL database. There are two ways to transfer HTML Form form data, namely POST and GET. The difference between the two methods lies in the URL parameters. If POST is used, the URL will not have parameters, but if GET is used, the form parameters will appear in the URL. Please refer to Examples of the following two delivery methods:

1. Send data through POST

<form action="PHP program to receive data" method="post"></form>

2. Transfer data via GET

<form action="PHP program to receive data" method="get"></form>

One of the important points here is that whether you use POST or GET, you must write lowercase English letters when writing the mothod in the form. If you write it in uppercase, it will cause problems! The most common problem is that PHP can't read the data, this should be a little bit careful.