HTML——表单

188 阅读2分钟

HTML——表单标签

一、表单的构成

79w1hj.png

1.表单域

1)<form>标签进行定义表单域:将范围内的信息提交给服务器

常用属性:

(1)action = "url地址":用于指定接收并处理表单数据的服务器的url地址

(2)method = ":提交方式(get/post)"用于设置表单数据的提交方式

(3)name = "表单域名称":用于指定表单域名称,用于区分同一个页面下的不同的表单域

2.表单控件(表单元素)

(1)

是个单标签,设置不同的属性值来指定不同的控件类型

属性值

描述
checked当页面打开时就默认选中的
value写在表单框里的提示元素
name属性给表单元素命名
button定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。用value值给按钮命名
checkbox定义复选框。即多选按钮。/选项中的各个选项进行name命名为同一名字,让服务器知道选的啥/
maxlength规定输入字段的最大长度
file定义输入字段和 "浏览"按钮,供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。/若想实现多选一,则需将选项中的各个选项进行name命名为同一名字才可/
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符

tips:单选和复选框都得有相同的name属性值

(2)label:绑定一个表单元素, 当点击该元素时,浏览器自动定位到该标签设置的元素上,用以增加用户体验

<label for = "sex">男</label>
<input type ="text" id ="sex">

(3)select:下拉表单元素

有多个选项需要用户选择,并节省页面空间

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

在option中可以定义一个selected="selected"则打开网页将默认选定某个option

(4)textarea:文本域标签

遇到大量书写文字的时候,textarea用于多文本输入

提供两个参数 :(1)cols(定义一行所容纳的个数)(2)row(定义多少行)

但在实际中一般用CSS来定义大小,不会使用这两个属性

3.提示信息