表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)
、下拉列表、单选框(radio-buttons)
、复选框(checkboxes)
等等。
表单使用表单标签 <form>
来设置:
<form>
.
input 元素
.
</form>
form标签属性:
- action : 定义表单数据提交地址
- method : 定义表单提交方式(常见的post和get)
form表单中包含的元素:
-
<label>
标签:为表单元素定义文字标注,点击后可直接跳转至表单元素 -
<input>
标签:定义通用的表单元素 -
<testarea>
标签:大文本,定义多行文本输入框 -
<select>
标签:定义下拉表单元素 -
<option>
标签:于标签配合,定义下拉表单元素中的选项;
<input>
标签
多数情况下被用到的表单标签是输入标签(<input>
)。
- type属性 : 定义表单的类型
- value属性:定义表单元素的值
- name属性:定义表单元素的名称,此名称为提交数据时的键名;
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
- text: 定义单行文本输入框
- password: 定义密码输入框
- radio: 定义单选框
- checkbox: 定义复选框
- file: 定义上传文件
- submit: 定义提交按钮
- button: 定义普通按钮
- image:定义图片作为提交按钮,用src定义图片地址
- hidden:定义一个隐藏表单域,用于存储值;
举例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个表单</title>
</head>
<body>
<!--表单类型-->
<form>
<!--输入框-->
姓名:<input type="text" name="username" >
<br>
密码:<input type="password" pwd="password"><br>
<!--单选框-->
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<br>
<!--多选框-->
爱好:
<input type="checkbox" name="like">跑步
<input type="checkbox" name="like">听歌
<input type="checkbox" name="like">吃火锅
<br>
<!--隐藏表单域-->
<input type="hidden" name="token" value="kkk1234">
<!--文件上传-->
<input type="file" name="upfile">
<br>
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset" value="重置按钮">
<!--普通按钮-->
<input type="button" value="按钮">
</form>
</body>
</html>
运行结果:
- text:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。
- password:密码字段字符不会明文显示,而是以星号或圆点替代;
- radio和checkbox: 一个单选,一个多选,name值必须相同,单选按钮(Radio Buttons)是通过name属性来分组的,也就是说必须使用相同的name,radio才会形成单选,如上面的例子,Apple、Orange、Bananas、Pear的radio的name属性都是fruits。如果name不同,是不具备单选这个效果的。
针对不同的radio,当让name属性是相同的,但是它们的value属性是不同的,当表单提交时就会提交已选radio的value属性的值,这样在处理模块中是可以直接获取的。;
4. submit:当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
输入内容提交试试什么情况:
此时的请求为:
可见默认为get请求:刚才定义的name为请求的键值,输入的内容为value值;
如果刚才把method定义为post