HTML+css+from表单元素知识总结

参数

1. form 表示表单
2. action 表示表单的提交地址
3. method 表示表单的提交方式
4. 在制作静态页面时，可不用书写上述的属性
5. 在制作静态页面时，建议不要设置form元素的样式
6. name：表示发送到服务器的键名
7. value：发送到服务器的值
8. autocomplete：规定是否启用缓存输入记忆，自动完成功能

       <form action="" method="" autocomplete="off"></form>
   

文本框type常用属性

1. text: 单行文本框（以下属性大部分通用）

   <input type="" name="" value="" placeholder="" disabled readonly pattern="[1-9]" maxlength="">
   

   • value=" "： 默认值
   • placeholder=""： 提示信息
   • autofocus：页面加载时就获得焦点
   • disabled：禁止使用，无法选中
   • readonly：可选中，只读
   • pattern=""：规定输入的格式，采用正则表达式
   • title：为pattern的提示信息和鼠标移入提示
   • required：表示文本框不能为空，可为空格
   • maxlength/minlength：输入的最多/最少的字数
   • outline: none; 取消输入框聚焦的边框线

2. password：密码框

3. radio：单选框（name的值要一样） checked 默认选中

   <input type="radio" name="sex" checked id="women">
   <label for="women">女</label>
   
   <input type="radio" name="sex" checked id="man">
   <label for="man">男</label>
   

   • 可以点击字进行选中

4. checkbox：复选框（名称一致）

5. file：上传文件

6. image：图片形式的提交按钮

7. submit：提交按钮

8. reset：重置按钮

9. textares：多行文本(标签)

   • cols：单行字数
   • row：行数

10. list：下拉列表

    • selected：默认选中

      <input type="text" list="firuts">
      <datalist id="firuts">
        <option value="香蕉"></option>
        <option value="苹果"></option>
        <option value="橘子"></option>
      </datalist>
      
      <select name="" id="">
        <optgroup label="市场">
          <option value="">香蕉</option>
          <option value="">苹果</option>
          <option value="" selected>橘子</option>
        </optgroup>
      </select>
      

11. 分组

    <fieldset>
      <!-- 分组的标题 -->
      <legend>帐号信息</legend>
      用户名：<input type="text">
      密码：  <input type="password">
    </fieldset>
    

12. button：单纯是个按钮

type不常用属性

1. hidden： 隐藏框
2. number：用于数字的文本框
   • step：步长 min：最小数 max：最大数字
3. range：数字滑动选择框
   • step：步长 min：最小数 max：最大数字
4. email：表单提交时，触发email格式验证（只能验证@）
5. url：触发url地址格式验证
6. trl：输入电话的文本框
   • pattern=“1\d(10)”
7. date：输入日期的文本框，默认value="2017-0 1-01"两位数
8. time：用于输入时间，默认value=" ‘’
9. datetime-local：用于输入日期和时间
10. month：用于输入月份
11. week：输入第几周
12. color：颜色选择框 rgba模式

所有的type：所有的type链接

input和button的区别

• input空元素，button是普通元素
• input是旧版本中的元素，button是HTML5中的元素
• input按钮中只能写文本，button的内容更丰富
• input兼容性更好，button稍差