What is a form?
Forms in HTML are an important means for HTML pages to interact with the browser. Using the form, the server can collect relevant information submitted by the client browser, such as the password entered, etc. When browsing websites, we often encounter forms. They are an important part of the interactive function between the server and the browser. Interaction here means a process of exchanging data with each other, such as transmitting the password we entered locally to the server. No matter what form of language the website uses to implement the interactive functions of the website, such as ASP, PHP, JSP, etc., forms have now become their unified information collection method.
The main function of a form is to collect information, specifically the information of the viewer. For example, if you apply for an email online, you must fill in the form page provided by the website as required, which mainly includes personal information such as name, age, contact information, etc. For example, if you want to speak on a forum, you must apply for qualification before speaking, and you must fill out a form page. Of course, the form is invisible without looking at the source code, and users cannot feel that the form exists.
Forms can be usually used for survey, ordering, search and other functions. Generally, forms are composed of two parts. One is the HTML source code that describes the form elements. In the browser, we can find this part through the source code. The second is the client script, or the program used by the server to process the user's fill-in. Here, it mainly processes the collected data. For example, the password obtained in the above example, must be transmitted to the server to verify whether the password is correct. If it is correct, it will enter, and if it is error-free, it will not be logged in. This is a processing process. In HTML, we can define forms and cooperate with form handlers in server-side scripting languages such as ASP and PHP. The process of processing form information is: when we click the button submitted in the form, the information entered in the form will be transferred to the server, and then processed by the server's relevant applications. After the processing, either store the information submitted by the user in the server database, or return the relevant information to the client's browser. Let’s take a closer look at the various knowledge points of the form.
1. Form tag <Form>
A form is in a specific area on a web page, defined and identified by a pair of <FORM> tags. <FORM> tags have two main functions in web pages.
First, you can define the scope of its function of the form, and other form object marks must be inserted into the form. For example, when we click the submit button, we submit content within the scope of the form, and content outside the form will not be submitted.
Second, it contains the relevant information of the form itself, such as the location of the script program that processes the form, the method of submitting the form, etc. The basic syntax and syntax of the form are explained as follows.
Basic syntax:
<FORM name=form_name method=method action=URL enctype=value target=target_win> ............</FORM>
The syntax explanation is as follows:
property | describe |
NAME | The name of the form |
METHOD | Define the method of transferring the form from the browser to the server, generally using two methods: get and post |
ACTION | Define the location of the form handler, there are two types: absolute path and relative path. |
ENCTYPE | Set the encoding method of the form |
TARGET | Set the display method of return information |
Among the above attributes, NAME, METHOD, and ACTION are the most commonly used and are also the basis for script program analysis. They are explained and explained in detail below. 1. The basic syntax of the Name attribute of the <FORM> tag is: <FORM name=form_name> ……………………… <FORM> Through the form name, you can control the relationship between the form and the server handler, and use the name to determine the identifier of the program processing in the server.
2. The basic syntax of the Action attribute of the <FORM> tag is: <FORM ACTION=URL> ……………………… <FORM> Through the ACTION attribute of the form, the address of data submission in the form is defined. This address can be an absolute path, a relative path, or an email address.
For example: <FORM NAME=MailACTION=mailto:[email protected]>
3. The basic syntax of the Mthod attribute of the <FORM> tag is: <FORM Mthod=method> ……………… <FORM> There are two methods to choose from Mthod, one is Get and the other is Post. When submitting data through the Get method, all the contents in the form will be appended after the URL address, separated by a question mark. The format of passing data is name=value. Name is the name of the data to be passed, and value is the value to be passed. When there are multiple values to be passed, the multiple values can be separated by symbols &. For example http://localhost/haha/haha.asp?name1=value1&name2=value2. Since this data is behind the URL address, the length of the submitted information is limited and cannot exceed 8192 characters. The most commonly used method is the Post method. This method contains the data filled in by the user in the form body and passes it to the server handler together. Therefore, there is no size limit for this method. When it does not specify which method, the default is the Get method. After defining the form tag <FORM>, you can add the tags for the code that completes the specific function. There are 4 tags that can be included in the form, as shown in the following table
mark | describe |
<INPUT> | Form input tags |
<SELECT> | Menu and list tags |
<OPTION> | Menu and list item tags |
<TEXTAREA> | Text domain markers |
In HTML code, their organization is as follows
<FORM> <input>……………</input> <textarea>……………</textarea> <select> <option>…………</option> </select></FORM>
For the above tags, the two most frequent script hacking technologies should be <INPUT> and <TEXTAREA>. Let’s explain these two tags in detail below. 2. Input tag <Input tag>Input tag <INPUT> is one of the most commonly used tags in forms. The text fields and buttons we commonly use in web pages are all used. The basic syntax is as follows:
<form> <input name=field_name type=type_name></form>
where name is the name of the domain and type is the type of the domain. There can be many property values in the type property. Among them, the commonly used and closely related to hacking technologies are: TEXT, PASSWORD, FILE, BUTTON, SUBMIT, RESET, HIDDEN. 1. Text domain TEXT
The TEXT attribute value is used to set the text area of the form and enter any type of text, numbers and letters. The input data is displayed in a single line. It may be difficult for everyone to understand this. I will give you an example to illustrate it later. First, look at its basic grammar and grammatical explanation. Basic syntax: <INPUT type=text name=field_name maxlength=value size=value value=field_VALUE> Syntax interpretation: These explanations are shown in the following table
Text domain attributes | describe |
NAME | Name of text field |
MAXLENGTH | Maximum number of input characters in the text field |
SIZE | Width of the text field (in characters) |
VALUE | Default value for text field |
This is some basic knowledge of the text domain. Many friends may still not understand it. Let’s write an example to illustrate the code below:
<html> <head> <title>Insert text domain</title> </head> <body> User survey<form action=mailto:[email protected] method=get name=haha> <!--Writing a form to connect as an email address, the method is get submit, the name is haha--> Name: <input type=text name=username size=20> <!--Writing a text domain with the name username and the width is 20--> Website: <input type=text name=URL size=20 maxlength=50 value=http:/// <!--Writing a text domain with the name URL, the width is 20, and the maximum input length is 50 The default value is http://--> </from> </body></html>
After writing the code, we change the suffix name to html and execute it. As shown in (Figure 1). For such pictures, I believe that all friends who can surf the Internet should have seen them.
(Figure 1)
2. Password domain PasswordWhen we are online, for example, if we log in to the email address, we must enter a password. The input box for entering the password is called the password domain, which is another form of the text domain. Its function is that all articles entered into the text field are displayed with asterisks* or dots. The basic syntax is similar to the text field above. The difference is that you just need to change the text in the type to password. Based on the example of the text field above, add a code password between the <form> tags: <inpyt type=password name=password size=20 maxlength=30> , after saving, open the file, and enter any character in the password input box to see, it is a dot, but the real character is hidden, as shown in (Figure 2).
(Figure 2)
3. File domain File
The file domain allows us to fill in the files on our local computer inside the domain and finally upload them through the form. This is the basic function of the file domain. The most used one should be uploading. In terms of appearance, the file field is a text box and a browsing button. We can either directly fill in the path of the file to be uploaded to the website in the text box, or click the browsing button to find the file to be uploaded on our computer.
The basic syntax is
<INPUT type=file name=field_name>Its type is File, Name is the name of this file field. Let’s simply write a file field, the code is as follows:
<html> <head> <title>Text field</title> </head> <body> <form> Please upload your photo: <INPUT type=file name=file> </form> </body></html>
After saving, open it and you can see the true face of the text field, as shown in (Figure 3). I believe everyone has seen such uploaded pictures.
(Figure 3)
4. Buttons in the button form play a crucial role. The button can have the function of submitting all the data of the form to the server, and can restore the form to its initial state when the user needs to modify the form, and can also play other roles according to the needs of the program. Buttons are generally divided into three types: BUTTON (normal button), SUBMIT (submit button), and RESET (reset button). The syntax of the normal button BUTTON is <INPUT type= BUTTON name= field_name value= BUTTON_TEXT>, where the value of value represents the text displayed on the button. The purpose of submitting button SUBMIT is to submit all the data in the form to the server handler after clicking this button. The basic syntax is <INPUT type= SUBMIT name= field_name value= BUTTON_TEXT>, where the value of value represents the text displayed on the button. Reset button RESET means that after clicking the button, all the data we added to the form are cleared and restored to the default form content settings. The basic syntax is <INPUT type= RESET name= field_name value= BUTTON_TEXT>, again: In HTML language, size is indistinguishable. Let’s briefly write an example to practice the effect of the button, the code is as follows.
<html> <head> <title>Form Button Demo</title> </head> <body> User Registration<form action=mailto:[email protected] method=get name=haha> Name: <input type=text name=username size=20><br> Password: <input type=password name=password size=20 maxlength=30><br> Website: <input type=text name=URL size=20 maxlength=50 value=http:/ /><br> <INPUT type= BUTTON name= field_name value= Normal button> <INPUT type= SUBMIT name= field_name value= Submit button> <INPUT type= RESET name= field_name value= Reset button> </from> </body></html>
After saving, open the file and take a look, as shown in (Figure 4). I think you have seen similar pictures, and the most common ones are used when registering users.
(Figure 4)
5. Hide domain HIDDEN
The hidden domain is not visible to us users on the page because it is hidden. The purpose of inserting the hidden domain in the form is to collect or send information. When we click the Submit button to send form data, the hidden domain information is also sent to the server. His basic syntax is <INPUT type=field_name value=value>. The reason I also explain to you is that many programs are writing programs that think this is hidden and think that the user cannot see it. Therefore, in many cases, there are no hidden domain parameters for detection and filtering, so many security accidents have occurred.3. Text field tag <TEXTAREA>
This tag is usually used to make multiple lines of text fields in a web page, so that more text can be entered, and the most used is in the comments of the article.
Its basic syntax is:
<TEXTAREA name=name rows=value cols=value value=value></TEXTAREA>
, the properties it has are shown in the following table.
Text field tag properties | describe |
name | Name of text field |
rows | Number of lines in text fields |
cols | Number of columns in text fields |
Value | Default value for text field |
The following is an example to explain it in detail so that everyone can understand from practice that this is not very difficult. The specific code is as follows:
<html> <head> <title>Text domain function demonstration</title> </head> <body> User survey<form action=mailto:[email protected] method=get name=haha> Message board: <br> <TEXTAREA name=comment rows=5 cols=40 ></TEXTAREA><br> <INPUT type= SUBMIT name= field_name value= Submit a message> </form> </body></html>
Save the code and change the suffix name and open it to see if it is the same as the message board on the Internet, as shown in (Figure 5).
(Figure 5)