Comprehensive knowledge of html forms

8.1 Form tagff9c23ada1bcecdd1a0fb5d5a0f18437

60e9b9321a8051d47b6151a9dcb61eaa..... .f5a47148e367a6035fd7a2faa965022e

☟ 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 tagd5fd7aea971a85678ba271703566ebfd

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" />

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" />

(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="域值">

(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">

(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"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->

(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"/>阅读

(7)提交按钮 submit

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

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

普通按钮 button

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

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

重置按钮 reset

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

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

图像按钮 image

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

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

(8)选择列表标记221f08282418e2996498697df914ce4e

8.1 选择列表：一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表

select 标记用于声明选择列表，option标记用于设置各个选项

<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
<option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项，可设置多个 -->
<option value="apple">苹果</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="grape" selected="selected">葡萄</option>
</select>

8.2 下拉列表：一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表，即size默认1不能设置 size和 multiple属性

<select name="area">
<optgroup label="国外"> <!-- <optgroup> 标签用于组合选项，即给选项分组类别,属性为label,指定选项组合名称 -->
<option value="1">华盛顿</option>
<option value="2">旧金山</option>
</optgroup>
<optgroup label="国内">
<option value="3">广州</option>
<option value="4">湛江</option>
</optgroup>
</select>

(9)文本域标记4750256ae76b6b9d804861d8f69e79d3

一般用于给用户填写备注信息或留言信息的多行多列文本区域

<textarea name="文本区域名称" rows="行数" cols="字符数">
...(此处输入的为默认文本，比如)请在此处输入备注信息
</textarea>

(10)2e1cf0710519d5598b1f0f14c36ba674 标签:为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。即为下面说的隐式的联系。

隐式和显式的联系：

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 2e1cf0710519d5598b1f0f14c36ba674 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <input type="text" name="DofB" /></label>

(11)fieldset 标签：把表单中元素组合起来，通俗的讲就是把表单围起来，顺便给个标题注释，看起来更规整。

基本语法：2b5469ab79cf842344327415c3b3bb95 e911751791aa3ba95dc724e2fb905976...a814477f903c8e27bd1ff8e5c6bbe7c1 ff9c23ada1bcecdd1a0fb5d5a0f18437...f5a47148e367a6035fd7a2faa965022e a3ae74428855f48d0438405a4619fe75

demo：

<fieldset>
<legend>我最喜爱的:</legend>
<label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
<label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
<label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>

The above is the detailed content of Comprehensive knowledge of html forms. For more information, please follow other related articles on the PHP Chinese website!