目录
form表单与input框
form表单
功能：
表单用于向服务器传输数据，从而实现用户与web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和label标签。（这个先了解后续学习）
属性:
| 属性 | 描述 |
|---|---|
| accept | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。如果是上传图片需要将属性变成enctype="multipart/form-data" |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
主要的属性有两个：action是提交地址，method是提交方式(也叫请求方式)，但是如果要牵扯到上传图片上面的就需要将enctype属性进行修改了
格式如下
<form action="" method="">
</form>
input标签
input标签会根据不同的type属性，变化为多种形态
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | < input type="password" /> |
| date | 日期输入框 | < input type="date" /> |
| checkbox | 复选框 | < input type="checkbox" checked="checked" /> |
| radio | 单选框 | < input type="radio" /> |
| submit | 提交按钮 | < input type="submit" value="提交" /> |
| reset | 重置按钮 | < input type="reset" value="重置" /> |
| button | 普通按钮 | < input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | < input type="hidden" /> |
| file | 文本选择框 | < input type="file" /> |
input其它属性说明:
input默认的属性是text
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用，输入此属性后就会禁用这个input元素
- hidden：用于隐藏input元素，但是它的数据还能用
然后代码如下
<!--input属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"/><br>
<input type="password"><br>
<input type="data"><br>
<input type="checkbox"><br>
<input type="radio"><br>
<input type="submit"><br>
<input type="reset"><br>
<input type="button"><br>
<input type="hidden"><br>
<input type="file"><br>
</body>
</html>
效果如图
这里穿插一些知识，比如submit、reset、button属性生成的按钮可以修改名字只用来input里面将value这个属性拿来给它们赋值名字
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="submit" value="登录"><br>
<input type="reset" value="刷新重置"><br>
<input type="button" value="超级按钮"><br>
</body>
</html>
效果如图
input主要还是给form表单做服务的
form与其它标签以及input的应用
在form表单标签里面input是最常用的表单标签，然后input里面的name属性是表单提交时的“键”,与id有区别
这里来演示一下带name属性是的情况
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="">
用户名：<input type="text" name="user"><br>
密码：<input type="password" name="pwd"><br>
性别：<input type="radio" name="性别" value="男">男<input type="radio" name="性别" value="女">女<br>
<input type="submit" value="登录">
</form>
</body>
</html>
这个代码里面为了实现单选框能正常使用先让这两个单选框的name都为同一个，然后在将value修改成不一样的就可以了。
效果如图
然后name的属性就能在浏览器请求中查看数据内容，这么做的目的就是将input输入的数据能带到后端里面去使用
这里将上面的input来放入form里面来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="" enctype="multipart/form-data">
<div>
<!--type是text属性-->
用户名：<input type="text" name="user"><br>
</div>
<div>
<!--type是password属性-->
密码：<input type="password" name="pwd"><br>
</div>
<div>
<!--type是radio属性-->
性别：<input type="radio" name="性别" value="男">男<input type="radio" name="性别" value="女">女<br>
</div>
<div>
<!--type是checkbox属性-->
爱好：<input type="checkbox" name="爱好" value="篮球">篮球
<input type="checkbox" name="爱好" value="游戏">游戏
<input type="checkbox" name="爱好" value="钓鱼">钓鱼
<input type="checkbox" name="爱好" value="逛街">逛街
<input type="checkbox" name="爱好" value="吃美食">吃美食
</div>
<div>
<!--type是file属性-->
头像:<input type="file" name="头像">
</div>
<!--type是submit属性-->
<input type="submit" value="登录">
<!--type是reset属性-->
<input type="reset" value="重置此内容">
<input type="button" value="娱乐按钮">
</form>
</body>
</html>
效果如图
再来展示一下禁用以及隐藏的属性
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>
<form action="" method="">
<input type="text" value="456" name="user" disabled><br>
<input type="password" value="123" name="pwd" hidden><br>
<input type="submit" value="登录">
</form>
</body>
</html>
效果如图
select标签
select标签里面包含option标签
- select标签
属性说明：
name是定义被发送到后端时的名字，id是它的在此html文档里面的识别值也就是专属的值。
- option标签
属性说明:
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
验证代码如下
<!--select标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="" method="">
<select name="城市" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option selected="selected" value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
</body>
</html>
这个代码里面使用了默认selected的属性来让广州变成第一个出现的
效果如图
