简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Comprehensive knowledge of html forms

迷茫
Release： 2017-03-25 15:23:30
Original
2474 people have browsed it

8.1 Form tag

..... .

☟ Form attributes:

◆ action: The server program used to specify the form, stipulates when the form is submitted When, where to send form data. The value of action is: first, a URL (absolute URL/relative URL), generally pointing to a program on the server side. The program receives the data submitted by the form (that is, the form element value) and processes it accordingly. For example:

When the user submits this form, the server will execute a general processing program named "reg.ashx". Second, use the URL address of the mailto protocol, which will send the form content as an email. This situation is relatively rare as it requires an email sending program to be installed and properly set up on the visitor's computer. Third, a null value. If the action is null or not written, it means it is submitted to the current page.

◆ method: This attribute defines how the browser submits the data in the form to the server handler. The most commonly used are get and post, and the get method is used by default.

What is the difference between get and post?

① Data query: For example, when browsing a forum, the URL generally contains information such as category, page number, number of records per page, etc. With the get method, you can see the information (conditions) you want to query at a glance. Because post hides this information, it is inconvenient to check the query conditions.

② Submission of sensitive data (security): When changing or adding operations to a record, such as registering a user, changing user information, etc. The get method appended to the URL will leak sensitive information. The post method can hide sensitive information.

demo:

After clicking submit using get method: the URL becomes: php Chinese website/ashx/login.ashx?login_username=admin&login_pswd=123456

Click using post method After submission: the URL becomes: php Chinese website/ashx/login.ashx ☜ You can see that it is only the URL specified by the action, and the parameters are not appended to the URL.

③ Big data text delivery: Although get is convenient for query, because it is attached to the URL, each browser also has a length limit on the URL. IE: 2048 characters. Chrome and FF seem to have 8182 characters. Post doesn't seem to have this restriction.

◆ onsubmit: used to specify the script function for processing the form

◆ enctype: Set the MIME type, the default value is application/x-www-form-urlencoded. When you need to upload files to the server, this attribute should be set to multipart/form-data

8.2 Input tag

Most form elements can use input Definition, in order to identify each data, we need to add the name attribute to the form element, so name is a required attribute, name="Field name"

(1) Text box text

The input information is displayed in clear text

用户名: <input type="text" name="user" />
Copy after login

The following are the main attributes of the single-line text box:

name (name, which can be used as an identifier to obtain data in the script) , maxlength (set the maximum number of characters that can be entered in the text box), size (length of the text box, approximately in bytes)

value: Specify the default value of the text box, which is the first value in the browser The value displayed in the text box after the form is displayed or after the user clicks the reset button.

readonly: Readonly attribute. When the readonly attribute is set, the text box can get focus, but the user cannot change the value in the text box.

disabled: Disabled. When the text box is disabled, it cannot gain focus. Of course, the user cannot change the value of the text box. And when submitting the form, the browser does not send the value of that text box to the server.

(2)Password box password

Echo the entered characters with "*" or "●" symbols, thus Plays the role of confidentiality 

密码: <input type="password" name="pwd" />
Copy after login

(3) Hidden domain hidden

The hidden domain will not be seen by viewers. It is mainly used on different pages. Pass the value set in the domain 

<input type="hidden" name="hid" value="域值">
Copy after login

(4) File domainfile

The file domain can upload local filesOn the server side, there is no default value for file upload. When using this function, the method attribute must be specified in the form tag. To specify the method as post, the enctype attribute is specified as multipart/form-data. Otherwise, the file content cannot be uploaded

<input type="file" name="photo">
Copy after login

(5) Radio button radio

Makes a single selection in a set of options, represented by a round box

Usage: To implement the radio selection function, the name values ​​must be equal. Use a group of radio buttons with the same name, and set different values ​​for different radios. In this way, you can know who is selected by taking the value of the specified name without making separate judgments. The element value of the radio button is explicitly set by the value attribute. When the form is submitted, the value and name of the selected item are packaged and sent without explicitly setting the value. 

性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->
Copy after login

(6)Check button checkbox

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
Copy after login

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">
Copy after login

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
Copy after login

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">
Copy after login

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
Copy after login

(8)选择列表标记