前端学习笔记(十一)

 第十一章：表单

一.表单的定义：

    定义了一个区域，可以和用户交互的区域
    form表单的属性：
    属性：
    action ：规定向何处发送表单
    method ：提交表单的方式

    1.get: 安全性低 速度快
    2.post: 安全性比get高 速度慢

    target： _self默认 _blank在新窗口打开
    name: 这个form的名字。HTML5中，一个文档中的多个form当中，name必须唯一而不仅仅是一个空字符串。提供了一种在脚本中引用表单的方法

二.表单元素/交互控件：

    大部分用input标签来定义表单元素！决定表单元素的类型的取决于type属性！
    可用的类型如下所示：

    文本框：

    type 表单控件的类型
    name 与表单数据一起提交的控件的名称。
    value 属性 :初始值。
    placeholder 向用户提示可以在控件中输入的内容。占位符文本不得包含回车符或换行符。
    <input type='' name='' value='' placeholder=''>

    密码框：

    password：其值被遮蔽的单行文本字段
    <input type='password' name='password' value='' placeholder=''>

    radio 单选按钮

    radio：一个单选按钮，允许从多个选项中选择一个值。要注意name值必须要相同的
    <form>
        <input type='radio' name='sex' value='' id='man'><lable for='man'></leble>
        <input type='radio' name='sex' value=''>
        <input type='radio' name='sex' value=''>
    </form>
    lable 关联
    通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。
    checked 默认选中一项目
    disabled 禁用某项

    checkbox 多选按钮

    checkbox：允许选择/取消选择单个值的复选框。

    提交按钮

    submit：提交表单的按钮。
    重置按钮
    reset：一个按钮，将表格的内容重置为默认值。
    上传按钮
    file：让用户选择文件的控件。使用accept属性来定义控件可以选择的文件类型。
    <input type="file" >
    隐藏
    hidden：未显示但其值已提交给服务器的控件。

    图片控件

    image：一个图形提交按钮。必须使用src属性来定义图像的来源，并使用alt属性来定义替代文字。可以使用高度和宽度属性以像素为单位定义图像的大小。
    <input type='image' src='' name='' width='' height='' border='' >
--------------------------------------非input控件-----------------------------------------
textareas 文本域
表示一个多行纯文本编辑控制。
<textarea name=""rows="" cols="">Write something here</textarea>
---------------------------------------------------------------------

    select下拉选框

    可选样式：
    size 默认显示几行
    option 下拉选项
    用于定义在<select> 元素中包含的项。
    可选样式
    disabled 禁用某项
    selected 规定在select里面默认展示项
    <select name="text">
        <option value="1">Value 1</option>
    </select>
----------------------------------------------------------------------------------

    fieldset 给表单分组

    通常用来对表单中的控制元素进行分组,要写在form元素里面。
    legend
    代表一个用于表示它的父元素<fieldset> 的内容的标题。

    表单伪类：

    :focus
    表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。