109 lines
2.6 KiB
Markdown
109 lines
2.6 KiB
Markdown
|
# 表单（form）
|
|||
|
|
|
|||
|
|
### form 简介
|
|||
|
|
|
|||
|
|
form元素表示文档中的一个区域，此区域包含交互控件，用于向web 服务器提交信息
|
|||
|
|
|
|||
|
|
### form 常用属性
|
|||
|
|
|
|||
|
|
- action 处理表单提交的url
|
|||
|
|
|
|||
|
|
> action 这个属性可以被<button>,<input type="submit">,或者<input type="image">元素上的formaction 属性覆盖
|
|||
|
|
|
|||
|
|
- method
|
|||
|
|
|
|||
|
|
- 属性值：
|
|||
|
|
- get
|
|||
|
|
- post
|
|||
|
|
|
|||
|
|
- target
|
|||
|
|
|
|||
|
|
- 属性值：
|
|||
|
|
- _blank 在新页面中打开
|
|||
|
|
- _self 在同一页面中打开
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### form 常用控件
|
|||
|
|
|
|||
|
|
- input
|
|||
|
|
|
|||
|
|
- 属性
|
|||
|
|
|
|||
|
|
- type
|
|||
|
|
|
|||
|
|
- text 单行的文本区域，输入中的换行会被自动清除 （默认值）
|
|||
|
|
|
|||
|
|
- password 密码框
|
|||
|
|
|
|||
|
|
- tel 用于输入电话号码的控件，拥有动态键盘的设备（如手机）上会显示电话数字键盘
|
|||
|
|
|
|||
|
|
- button 没有默认行为的按钮
|
|||
|
|
|
|||
|
|
> type =button 时，按钮中的文字是 value 属性的值，默认为空
|
|||
|
|
|
|||
|
|
- radio 单选框
|
|||
|
|
|
|||
|
|
> type=radio 时，显示的效果为单选框 属性有： name，value
|
|||
|
|
>
|
|||
|
|
> 属于一组的选项的name的值必须要统一 才能实现单选的效果
|
|||
|
|
>
|
|||
|
|
> 为了保证给后台的值是不同的，要定义不同的value value 属性的值指代的是选择后取出的值
|
|||
|
|
|
|||
|
|
- checkbox 复选框
|
|||
|
|
|
|||
|
|
> type=checkbox 时，显示的效果为多选框，属性为name, value
|
|||
|
|
>
|
|||
|
|
> 相同name的选项为同一组复选,checked="checked" 表示选中某复选项
|
|||
|
|
>
|
|||
|
|
> value也需要定义不同的值
|
|||
|
|
|
|||
|
|
- hidden 隐藏
|
|||
|
|
|
|||
|
|
- file 文件上传
|
|||
|
|
|
|||
|
|
> 包含文件上传功能的表单 需要在form 表单的form 标签中添加 enctype="multipart/form-data"
|
|||
|
|
|
|||
|
|
- select 下拉框
|
|||
|
|
|
|||
|
|
- 具体用法：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<select name="pets" id="pet-select">
|
|||
|
|
<option value="">选项的值</option> <!-- value 的值是选中后传到服务器的值 -->
|
|||
|
|
</select>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
效果如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- 常用属性 （针对select 标签)
|
|||
|
|
|
|||
|
|
- multiple 能不能同时选中多个
|
|||
|
|
- size 一次显示多少个选项
|
|||
|
|
- selected="selected" 默认选中 针对 option
|
|||
|
|
|
|||
|
|
- label
|
|||
|
|
|
|||
|
|
- 表示用户界面中某个元素的说明
|
|||
|
|
- 可以放在任何input 控件元素附近
|
|||
|
|
- label 是行内样式
|
|||
|
|
|
|||
|
|
- textarea 多行文本框
|
|||
|
|
|
|||
|
|
- 属性：
|
|||
|
|
- rows 定义文本框输入行数 即显示的高度
|
|||
|
|
- cols 定义文本框输入列数 即显示宽度
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### form控件的公用属性：
|
|||
|
|
|
|||
|
|
- placeholder 提供可描述输入字段预期值的提示信息
|
|||
|
|
- disabled 禁用
|
|||
|
|
- autofocus 自动聚焦
|
|||
|
|
|