表单标签

• 格式：
  <form>
  <表单元素>
  </form>
• 作用;
• 表单就是专门用来收集用户信息的

表单元素

• input

• 格式：
  <input type="值">

• 作用：

  • input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

• 注意：表单元素一定要写在表单标签中

• 明文输入框：
  <input type="text">

• 暗文输入框：
  <input type="password">

• 给输入框设置默认值：
  <input type="text" value="asd">
  <input type="password" value="123">

• 单选框：
  <input type="radio" name=asd checked=checked>男
  <input type="radio" name="asd">女
  <input type="radio" name="asd">保密

• 注意：

  • 默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
  • 要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
  • 在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值

• 多选框：
  <input type="checkbox" name="asd"/> 篮球
  <input type="checkbox" name="asd"/> 足球
  <input type="checkbox" name="asd"/> 棒球

• 注意：多选框，天生是不互斥的，如果想互斥，必须要有相同的name属性

• 普通按钮：
  <input type="button" value="我是按钮">

• 注意：可以通过value属性来给按钮指定标题

• 作用：配合JS完成一些操作

• 图片按钮：
  <input type="image" src="图片路径/图片名称">

• 重置按钮：
  <input type="reset" value="清空">

• 注意：如果想想改重置按钮默认的按钮标题可以通过value属性来修改

• 作用：用于清空表单中已经填写好的数据

• 提交按钮：
  <input type="submit">

• 注意：

  • 要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
    1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
    2.需要给需要提交到服务器的表单元素添加一个name属性

• 隐藏域：
  <input type="hidden">

• 作用:定义隐藏的输入字段

• 暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用

• 取色器：
  <input type="color">

• HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容

• 日期选择器:
  <input type="date">

• HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容

• Label标签

• 作用：默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

• 绑定格式：
  1.将文字利用label标签包裹起来
  2.给输入框添加一个id属性
  3.在label标签中通过for属性和输入框中的id进行绑定即可
  <label for="asd">账号:</label><input type="text" id="asd">

• datalist标签

• 格式：
  <datalist>
  <option>待选项内容</option>
  </datalist>

• 作用:给输入框绑定待选项

• 事例：
  请输入你的车型: <input type="text" list="cars">

     <datalist id="cars">
           <option>奔驰</option>
           <option>宝马</option>
           <option>奥迪</option>
           <option>路虎</option>
  

事例.png

<option>宾利</option>
</datalist>

• select标签
• 格式：
  <select>
  <option>列表数据</option>
  </select>
• 作用：用于定义下拉列表
• 给下拉列表设置默认值：
  <select>
  <option>列表数据</option>
  <option>列表数据</option>
  <option selected="selected">列表数据</option>
  </select>
• 给下拉列表添加分组：
  <select>
  <optgroup label="分组名称">
  <option>列表数据</option>
  </optgroup>
  </select>
• 注意：
  • 下拉列表不能输入内容, 但是可以直接在列表中选择内容
  • 可以通过给option标签添加一个selected属性来指定列表的默认值
  • 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
• textarea标签
• 格式:
  <textarea>
  </textarea>
• 设置宽高的多行输入框
  <textarea cols="30" rows="10">
  </textarea>
• 注意：
  • 默认情况下输入框可以无限换行
  • 默认情况下输入框有自己的宽度和高度
  • 可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
  • 默认情况下输入框是可以手动拉伸的，可以通过CSS设置禁止拉伸
    
    <style type="text/css">
    textarea{
    resize: none;
    }
    </style>