表单的一些基本知识

表单

作用：收集数据，收集客户信息
包括两部分：表单域和表单控件

1.表单域

form，叫表单域，里面存放表单控件
表单内还有表单控件 input，他属于空标记，添加表单控件的其中一个标签，通过type属性的属性值来显示不同的表单控件
form 可以嵌套其他的标签，例如table

Form属性action、method、name，
所有的标签都有name属性，但是form中的name属性是必选项，没有name，后期是无法进行提交的

2.表单控件

表单控件属性：
type 表单控件类型选择
value 是表单内容的初始值、默认值
placeholder 添加提示信息
checked 默认选中属性，属性值和属性名相同；用于单选框或者多选框
disabled 禁止选中；属性名和属性值相同，设置后无法选中；用于单选框或者多选框或者输入框
name 所有标签都默认存在的属性，只是在表单中该属性必须设置，否则上传数据有误；下拉菜单中非必须
id 设置的id名

注：按钮 按钮标签 本质和 一样，建议使用input

type 表单控件的类型；
包括：
text 文本输入框；账户输入
password 密码框
reset 重置按钮
button 空标签
submit 提交按钮
radio 单选按钮（单选框）；默认无法只能选一个，并且选中后无法取消
方案：通过name属性去判断这几个单选框是不是属于一个组的，一个组会只能选一个
name一致则是一个组的，需用英文命名

checkbox    复选框；可以同时选中多个，也可取消
file        上传文件按钮
hidden      隐藏表单元素；主要用于储存内容，不会在浏览器内显示，常用于交互验证

3.下拉菜单

他的默认选中属性是selected,加在option
selcect加size属性会变成列表，一般不用

出生日期： 1991 1992 1993 年

4.多行文本框，评价或者留言这种，可以理解就是可以输入多行文本的输入框

rows 行数
cols 列数
但是一般不用行数和列数去设置，因为框会动，常用直接使用class名后用css设置
去除可拖拽属性 {resize:none;}在css设置
vertical-align 设置文字垂直

5.表单标签（补充）

（1）
表单字段集
说明：相当于一个方框，在低端机中科院包含文本和其他元素。该元素对于表单中的元素进行分组并在
在文档中区别标出文本。
fielset元素可以嵌套，其内部可以在设置多个fielset对象。disabled定义空间禁制可用

特点：可以嵌套，自己或者其他元素；自带边框
作用：给表单元素划分区域，或者进行分组
注：他是写在表单内的；
由于本身自带一些样式属性，比如说边框可以先设置border：none,再去设置border-top

（2）
字段集标题
说明：该元素可以在fieldset对象绘制的方框内插入一个标题；legend袁术必须是fieldset内的
唯一一个legend元素
align=“left/center/right/justify” 设置的是legend的位置，还会设置到内部内容对其
如果单纯想将标题改变对其方式可以使用padding

（3）

说明：该元素用来定义标签，为页面上的其他元素指定提示信息，要将label袁术绑定到其他的控件上，可以将
label元素的for属性设置为与该控件id属性值相同；
一般在左边提示文字加上后，导致表单控件无法对其的解决方法是给label标签加样式，转换行内块元素，加统一宽度再去设置对齐

–>

<form action="" method="" name="">
  <!-- 表单控件最好用div或者p（p自带行间距）标签包裹起来，这样块元素独占一行，尽量避免使用br标签 -->
  <div>账号<input type="text" placeholder="我是提示信息" /></div>
  <div>密码<input type="password" disabled="disabled" /></div>
  <!-- 自带默认value是重置，需要换字体就设置value属性 -->
  <p><input type="reset" /></p>
  <!-- button  空标签 -->
  <p><input type="button" /></p>
  <!-- 自带默认value是提交，需要换字体就设置value属性 -->
  <p><input type="submit" value="安全登录" /></p>

  <p>
    你的性别是 <input type="radio" name="sex" id="" checked="checked" />男
    <input type="radio" name="sex" id="" />女
  </p>
  <p>
    <input type="checkbox" checked="checked" />音乐
    <input type="checkbox" />足球
    <input type="checkbox" disabled="disabled" />游泳
  </p>

  <p>
    请上传文件
    <input type="file" name="" id="" />
  </p>
  <p>
    出生日期：
    <select>
      <option value="">请选择</option>
      <option value="" selected="selected">1991</option>
      <option value="">1992</option>
      <option value="">1993</option>
    </select>
    年
  </p>

  <p>请留言<textarea name="" rows="3" cols="10"></textarea></p>
  <fieldset>
    我是fieldset,可以嵌套
    <fieldset>里面的</fieldset>
  </fieldset>
</form>

<form action="">
  <fieldset class="fiew">
    <legend align="left">详细信息</legend>
    <p>地址<input type="text" name="" id="" /></p>
    <p>
      <label for="times">时间</label>
      <input type="text" name="" id="times" />
    </p>
  </fieldset>
  <fieldset disabled="disabled">
    <p>
      <label for="names" class="lab">账号</label>
      <input type="text" id="names" />
    </p>
    <p>
      <label for="psd" class="lab">微信密码</label>
      <input type="text" id="psd" />
    </p>
  </fieldset>
</form>