webveuje/html/表单.md

表单（form）

form 简介

form元素表示文档中的一个区域，此区域包含交互控件，用于向web 服务器提交信息

form 常用属性

• action 处理表单提交的url

  action 这个属性可以被,,或者元素上的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 自动聚焦