目录

• form表单
  • 表单属性
  • action
  • method
  • input标签
  • select标签
  • textarea标签

form表单

表单能够获取用户输入，用于向服务器传输数据，从而实现用户与web服务器的交互

表单属性

action

控制数据提交的地址，有三种书写方式：

• 不写 默认就是朝当前这个页面所在的地址i提交数据
• 写全路径 如（https://www.baidu.com）
• 只写路径后缀（/index/）

method

控制数据提交的方式，有get、post

• form表单默认是get请求

input标签

text 单行输入文本 password 密码输入显示 为密文形式 date 日期输入框，可以选择日期 radio 加上name，单选框 button 普通按钮，没有实际意义，但是用的最多，可以绑定js事件 reset 重置按钮 submit 提交按钮，能够自动触发form表单提交数据的动作 checkbox 复选框 file 文本选择框 hidden 隐藏输入框

type属性值	表现形式

注意：能够触发form表单提交数据动作的标签有两个：

• input标签的submit <input type="submit" value="按钮">
• button标签：<button>我是一个button标签</button>

通常情况下input需要结合label一起使用

表单中的input元素根据type参数不同，展示不同的功能：

password

date

radio 单选框

submit 提交按钮

button 普通按钮

reset重置按钮

注意：所有获取用户输入的标签 都应该有name属性

• name属性就相当于字典的key
• input框获取到的用户输入 都会放到input框的value属性中

input标签属性说明：

• name： name属性就相当于字典的key
• value： 表单提交时对应的值，input框获取到的用户输入 都会放到input框的value属性中
• checked： 男 <input type="radio" name="gender" checked="checked"> 默认选中
• readonly： 只读模式，不能修改
• disabled: 禁用，所有input都适用

select标签

<p>
    省份:
    <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">广州</option>
        <option value="">深圳</option>
    </select>

</p>
<p>
    动漫
    <select name="" id="" multiple>
        <option value="">鬼刀</option>
        <option value="">灵笼</option>
        <option value="">风云</option>
    </select>
</p>

一个个的option标签就是一个个的选项

属性说明：

• multiple：布尔属性，设置后为多选，否则默认单选
• disabled：禁用
• selected：默认选中该项
• value：定义提交时的选项值

textarea标签

多行文本

属性说明：

• name：名称
• rows：行数
• cols：列数
• disabled：禁用