IT Band of Brothers HTML5 Tutorial HTML5 Forms HTML form design 1

8098cd1da739434b91065966e38599b7.jpg

 

PHP application form is most commonly used to collect the data input interface information of site visitors. Get through a form of user input data browser, and transmitted to the Web server's script, in a variety of ways for processing. Providing a variety of ways in the form input, including text entry field, or more options button, drop-down list of domains and the like. Form is the <form> tag defines a specific region, and can form a variety of input fields, <select> and <textarea> 3 defined by the tags <input> on the page.

 

1 form tag <form>

A form to create a <form> </ form> tags that define the form of start and end positions, everything is defined between the start and end tags belong to the contents of the form. When you click the submit button, the content is within the range of submission of the form. Further, <form> tag in the form required to carry information, such as the location of the script processing form, form submission method. This information is not visible to the viewer, but for processing forms, however, have a decisive role. The common attributes tag shown in Table 1.

TABLE 1 HTML form tag common attributes

 

07d2363952384c0989458c07631f1e97.png

 

<Form> tag action attribute must be added, and can not be null. For example, <form action = "login.php" method = "post">. If no action using the property must be defined to: <form action = "no">.

 

2 text fields and password fields

在<form>标签内定义的<input>标签具有重要的地位,该标签是单个标签,没有结束标记。<input type="">标签用来定义一个用户输入区,用户可以在其中输入信息。<input>标签中共提供了9种类型的输入区域,具体是哪一种类型由type属性来决定。文本和密码输入域是一个单行文本框,它们基本相似,唯一不同的是,用户在密码域中输入的字符并不以原样显示,而是将每个字符用“*”代替。文本和密码输入域的基本语法格式如下:

<input  type="text" name="field_name" value="field_value" size="n" maxlength="n">       <!-- 输入域 -->

<input  type="password" name="field_name" value="field_value" size="n" maxlength="n">   <!-- 密码域 -->

这些属性的含义如表2所示。

表2  HTML中<input>标签的常用属性z

629a5c98b9ec4844a7ca4b32ddc8a5ad.png

3  提交、重置和普通按钮

在<input>标签中,当type属性值为“submit”时,表示这是一个提交按钮,单击提交按钮后,可以实现表单内容的提交;当type属性为“reset”时,表示这是一个重置按钮,单击重置按钮后,表单的内容将恢复为默认值;当type属性为“button”时,表示这是一个普通按钮,并不实现任何功能,需要和JavaScript等脚本语言一起使用。button按钮必须定义在form之间,否则Netscape浏览器不支持。这3种按钮的基本语法格式如下:

<input  type="submit" name="field_name" value="field_value">  <!-- 提交按钮 -->

<input  type="reset" name="field_name" value="field_value">  <!-- 重置按钮 -->

<input  type="button" name="field_name" value="field_value">  <!-- 普通按钮 -->

4  单选按钮和复选框

单选按钮和复选框都有“选中”和“未选中”两种状态。同一组单选按钮如果有多个选择框,则选择框之间是相互排斥的,只允许用户选择其中的一个。复选框和单选按钮的区别是,复选框允许用户同时选中同一表单中的多个或全部选项,当然,也可以只选其中的一个选项。它们都是只有在“选中”时,数据才能被提交到服务器端。其语法格式如下所示:

<input  type="radio" name="field_name" value="field_value" checked>  <!-- 单选按钮 -->

<input  type="checkbox" name="field_name" value="field_value" checked> <!-- 复选框 -->

 

In the <input> tag, when the type attribute value "checkbox", indicates that this is a check box input field; when the type attribute value "radio", it indicates that input field is a radio button. However, multiple radio buttons in the same group name must be the same, in order to mutually exclusive between them. Radio buttons and check boxes can be set to the selected state by checked property.

Guess you like

Origin www.cnblogs.com/itxdl/p/11669478.html