Form 表单

表单用于向服务器传输数据，从而实现用户与Web服务器的交互,表单是一个容器,能够包含input textarea select fieldset和label标签.

Form表单提交数据的几个注意事项:
1. form需要环绕在需要提交的各种标签外围
2. form提交的数据提交到哪里去,需要用form标签的action属性规定,一般是一个地址
3. 数据需要组织起来,采取类似于键值对的方式提交,也就是input一定要有个name属性,即后端拿到的字典的键,对应的值就是其中的值
4. 对于选择类型的input,需要在input标签里配上值,以表示选择该选项的值,显示的选项只起到提示的作用
5. 选择类型的input,name属性相同的为一组
6. select标签的name也是键,下拉菜单里的每个option里的value就是对应这个键的值,一般值都用数字或者字符,不要用中文

一个表单相当于一个大的容器,每一个input或者select表示一个键和对应的值.在提交表单之后,表单就会将其中的所有用于交互的标签组织成数据发到指定的地址和端口,被相应的应用程序拿到,之后就可以针对该数据进行操作.不了解其中元素的作用,就无法了解form表单的属性,所以先来看其中的元素属性,再回头看form元素的属性

input 标签

先看一下input的详细用法:

注意,如果input为file类型,则必须在form标签里指定method ="post",get与post是HTTP协议的请求.methon属性不写,默认是get.还需要加enctype="multipart/form-data"

placeholder="占位值"也可以用于input标签,会显示占位值,但如果和value一起使用,value的优先级较高.

select 标签

select标签用于下拉菜单的选择,用optgroup标签来给选项分组,用option标签来标识具体选项,注意,每一个option标签都要加上value属性,以表示选择的值

<label for="pro">选择区域</label>
<select name="province" id="pro" multiple="multiple" size="8">
    <optgroup label="beijing">
        <option value="0">hd</option>
        <option value="1">dc</option>
        <option value="2">xc</option>
        <option value="3">hd</option>
        <option value="4">tx</option>
    </optgroup>
    <optgroup label="shanghai">
        <option value="10">ja</option>
        <option value="11">hp</option>
        <option value="12" selected="selected">bs</option>
        <option value="13">pt</option>
        <option value="14">lg</option>
    </optgroup>
    <option value="20">hk</option>
    <option value="21">gz</option>
    <option value="22">saner</option>
    <option value="23">sitong</option>
</select>

select的name属性一定要有,因为下拉菜单最终是只选择一项,name就是选项对应的键,而option的value就是选项对应的值.label标签用于给指定的交互元素添加说明,其for属性一定要等于交互元素的id.

multiple属性与size属性常搭配使用,表示可以多选(windows下按住ctrl来多选,但更好的方式是采用复选选项),然后展示多少选项.如果不加多选,其实没有必要加"size".

optgroup用于分组选择,其label标签的值就是在下拉菜单里出现的文字(但无法选中),option是最终选项,必须设置value属性,其内容也显示在下拉菜单上.selected属性表示默认选中.disabled属性表示不可用

textarea 标签

textarea就是给用户输入大段文字的地方,用法示例

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

name一定要设置,cols表示列宽,rows表示行宽,但用户输入的内容可以超出范围.内容表示默认内容,会被用户输入所覆盖.disabled也适用

fieldset 标签

fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。 一组表单元素放到 fieldset 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset>
    <legend>操作按钮</legend>
    <label for="submit">提交</label>
    <input type="submit" name="tijc" id="submit" value="提交所有数据">
    <label for="reset">重置</label>
    <input type="reset" name="res" id="reset" value="重置所有数据">
</fieldset>

legend标签用以规定显示的框主题,浏览器会生成一个特殊的框框柱里边的表单元素

label标签

除了用for = "id"来和需要显示内容的input元素进行关联以外,还可以按照下边的方法使用:

<label>输入日期
    <input type="datetime-local" name="date" id="date">
</label>

这样无需通过for属性取得联系

Form 属性

在看完了form内部标签的特性,可以发现,起内部元素就相当于具体的数据键值,而form就在最外层相当于一个容器,控制着里边的数据向哪里提交,如何提交等等