HTML基础复习(八)表单

表单-----<form>用于收集不同类型的用户输入
最常用的输入元素
  1、<input>,根据类型type属性可以设置不同的输入类型:
    type="text":文本域,文本域的缺省宽度是20个字符
    type="password":密码字段
    type="button":按钮
    type="radio":单选按钮
    type="checkbox":复选框
    type="submit":提交按钮
    type=“number”:数字输入框
    type=“range”:数字范围滑动条
 
  2、<select>,下拉选择框
    <select name="sex">
      <option value="boy">boy</option>
      <option value="girl">girl</option>
    </select>
  • 默认显示第一个option;要预设下拉框,在对应的标签<option>内添加属性selected即可
  • 属性multiple和size可设置多选,但还是尽量使用复选框
 
  3、<textarea>多行文本输入框
    <textarea rows="10" cols="30">
      我是一个文本框。
    </textarea>
 
  4、<label>为input元素标记
  • 当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上,优化鼠标点击事件易用性,它的for属性应当与相关元素的ID相同。
 
  • 它还可以在表单以外,但它仍然属于某一个表单,通过form属性指定它关联的表单
  5、<fieldset>将表单内的相关元素分组。
    <fieldset> 标签会在相关表单元素周围绘制边框。
    <legend>标签为fieldset元素定义标题
 
  6、<datalist>预先定义输入框input的可能选项
 
    <input list="browsers">
     <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
 
原文地址:https://www.cnblogs.com/YanRuYu-MoRuHua/p/6723601.html