Explanation of knowledge related to forms in HTML (code examples)

action : Where the data entered by the browser is transmitted

method: The method of data transmission (get/post)

Note: All form controls (text boxes, text fields, buttons, radio boxes, check boxes, etc.) must be placed between the

<form method="传送方式" action="服务器文件">
<form method="post" action="save.php">
    <label for = "username">用户名：</label>
    <input type = "text" name="username" />
    <input for = "pass">密码:</label>
    <input type = "password" name="pass">

The label label in the form form

The label label is used to improve usability for mouse users. This control will be triggered if the text is clicked within the label label. That is to say, when the user clicks to select the label, the browser will automatically turn the focus to the form control related to the label (the form control associated with the label will be automatically selected).

Note: The value in the for attribute of the label must be the same as the value of the id attribute of the control.

<label for="控件id名称">

Text input box, password input box

The text input box is used when the user wants to type letters, numbers, etc. in the form. . The text box can also be converted into a password input box.

type: When type="text", the input box is a text input box; when type="password", the input box is a password input box.

name: Name the text box for use by the background program ASP and PHP

value: Set the default value for the text input box. (Generally used as a prompt)

<form>
    姓名：
    <input type = "text" name="myName">
    <br/>
    密码：
    <input type = "password" name="pass">
</form>

Text field

When the user needs to enter a large section of text in the form, text needs to be used Enter the domain.

</span> Tags appear in pairs, <textarea> begins, ends;

cols: The number of columns in the multi-line input field;

rows: The number of rows in the multi-line input field;

在标签之间可以输入默认值。注意cols和rows这两个属性可用CSS样式的width和height来代替：col用width、row用height来代替。

<form method = "post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10">在这里输入内容。。。</textarea>
</form>

单选框、复选框

在HTML中有两种选择框，单选框和复选框，两者的区别是单选框中的选项用户只能选择一项；复选框中用户可以任意选择多项甚至全选。

type：当type="radio"时为单选框，type="checkbox"时为复选框

value：提交数据到服务器的值

name：为控件命名

checked：当设置checked="checked"时，该选项被默认选中

注意：同一组单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的用作。

下拉列表框

<option value=&#39;提交值&#39;>选项</option>

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

value='提交值'——>向服务器提交的值；选项——>显示的值

selected="selected"属性，则该选项就被默认选中。

下拉列表可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在window操作系统下，进行多选时按下Ctrl时同时进行单击(在Mac下使用Command+单击)，可以选择多个选项。

提交按钮和重置按钮

表单中有两种按钮可以使用，分别是提交按钮，重置按钮。

提交按钮：

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

重置按钮：

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

<input type="submit" value="提交">
<input type="reset" value="重置">

相关推荐：