当需要向服务器提交数据时,我们一般会选择使用form表单来实现数据的提交。
<form>
标签用来表示一个需要向服务器提交的数据表单,在这个form表单的子标签里,需要实现让用户 输入、单选、多选(input标签),下拉选择(select标签),点击(button标签或者input标签),输入大段文字(textarea标签)等操作。
一.form标签的使用
<form action="http://www.baidu.com" method="post">
<!-- 在这里放入input/select/textarea等子标签,用来让用户输入内容 -->
</form>
常见属性
属性名 | 取值 | 含义 |
---|---|---|
action | url | 表示当点击提交按钮时,form表单里的数据要提交到的服务器地址 |
method | get或post | 表示向服务器提交数据时的方式,支持get和post提交,默认提交方式是get |
二. form表单的常见属性
属性名 | 取值 | 含义 |
---|---|---|
type | text | 默认值,显示一个普通的文本输入框 |
button | 显示一个普通按钮 | |
submit | 显示一个提交按钮,点击时,会提交所在form表单里的数据 | |
image | 根据src属性指定的图片路径,加载显示一张图片,作为提交按钮 | |
reset | 显示一个重置按钮,点击时,会重置所在form表单里的数据 | |
radio | 显示一个单选框,多个相关联的单选框name属性值要一样,否则无法实现多选 | |
checkbox | 显示一个复选框 | |
file | 显示一个文件按钮,点击时可以选择电脑上的文件 | |
password | 显示一个密码输入框,当用户输入时,会显示成为密文 | |
number | 显示一个输入框,用户只能输入数字、正负号和字母e,其他非数字无法输入 | |
显示一个文本输入框,用户输入的内容要符合电子邮箱地址,否则点击提交按钮时会出现错误提示,无法提交数据 | ||
tel | 控制用户输入手机号,当用户使用手机访问网页,点击文本框时,会弹出拨号键盘 | |
name | 任意文本 | 设置input的名称,当提交给服务器时,会作为key提交 |
value | 任意文本 | 当提交给服务器时,会作为value提交 当input为文本输入框时,设置文本输入框上的内容;当input为按钮时,用来设置按钮上的显示文字 |
checked | checkeck或者不设置 | 当type为radio或者checkbox时,用来设置默认选中 |
autofocus | autofocus或者不设置 | 设置当打开页面时,文本输入框是否自动获取焦点 |
autocomplete | autocomplete或者不设置 | 设置是否自动补全,注意,只有input标签设置了name属性以后,autocomplete才有效 |
required | required或不设置 | 表示该输入框必须要填写,否则无法提交 |
readonly | readonly或不设置 | 表示该输入框里的数据不可修改 |
disabled | disabled或不设置 | 表示禁用文本输入框,多用于按钮 |
max/min | 数字 | 当type为number时,用来设置最大值和最小值区间 |
placeholder | 任意文本 | 当input的类型为输入框时,用来在输入框中显示提示信息 |
三 .form表单的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>