HTML5-表单

HTML5-表单

一、Form

1．action 属性
action 属性用于指定表单提交时向何处发送表单数据，即需要发送的服务器地址

<form action="form.php">各种表单控件</form>

2．method 属性
method 属性用于指定表单向服务器提交数据的方法，包括两种方法，分别是 get 和post。
（1）get 方法的特点
使用 URL（统一资源定位符）传递参数：http://服务器地址？name1=value1&name2=value2，其中“?”符号表示要进行参数传递，“?”符号后面采用“name=value”的形式传递，多个参数之间，用“&”符号连接。URL 传递的数据量有限，只能传递少量数据。
PS：使用 URL 传递参数并不安全，所有信息可在地址栏中看到，并且可以通过地址栏随意传递其他数据。
（2）post 方法的特点
将数据封装后使用 http 请求传递，信息在地址栏中不可见，比较安全，并且传递的数据量理论上没有限制。
get 方法是表单提交的默认方法，但是通常采用 post 方法传递数据
3．enctype 属性
enctype 属性指定表单发送的编码方式，只有 method="post"时才有效，共有三种属性值。
1）application/x-www-form-urlencoded：此为默认值，如果 enctype 属性省略不写，则表示采取此种编码方式
2）multipart/form-data：不对字符编码，用于上传文件时使用。
3）text/plain：将空格转换为“+”符号，但不编码特殊字符，通常在将表单发送到电子邮箱时使用。

二、Input输入框

1．type 属性
type 属性表示 input 输入框的类型，它的默认值是 text。
2．name 属性
name 属性表示 input 输入框的名称，一般必填。因为传递数据时，使用“name=value”的形式传递。
3．value 属性
value 属性表示 input 输入框的默认值。

<form action="form.php"method="post">请输入内容：
        <input type="text"name="text1"value="输入框的默认值"/>
    </form>

4．placeholder 属性
placeholder 属性表示输入框中的提示信息，当输入框有 value 属性的时候，提示内容会消失，转而显示 value 属性值。

验证placeholder<input name="text2"type="text"placeholder="请输入"/>

5．tabindex 属性
tabindex=“1” 此属性控制按 Tab 键时的跳转顺序，从最小的数值开始，逐个往大的数值跳转，依次获得焦点。

三、Text文本输入框

文本输入框用于输入单行文本，默认宽度为 20 个字符。

<form action="form.php" method="post">
        请输入内容：
        <input name="text1" type="text" maxlength="10" size ="5"/>
        <!--上述代码表示这个文本输入框的最大字符长度为 10，可显示的字符数为 5 -->
        </form>

四、password：密码输入框

密码输入框输入的内容会以小黑点的形式替代显示。

<form action="form.php"method="post">密码框：
            <input name="pwd" type="password"maxlength="16">
        </form>

五、radio：单选按钮

单选按钮用于填写表单时信息选择，如调查问卷中的单选题

<form action="form.php"method="post">
            <input type="radio"name="sex"value="男"checked="checked"/>男
            <input type="radio"name="sex"value="女"/>女
        </form>

name 和 value 属性需同时存在，提交时，提交的是 value 中的属性值。
例如：<input type="radio" name="sex" value="男"/> 提交时，显示"sex=男"。
radio 凭借 name 属性区分是否为同一组。name 相同，为同组，同组中只能选择一个。
checked=“checked” 默认选中。radio 只能选一个，checkbox 可以选多个。

六、checkbox：复选按钮

复选按钮与单选按钮相同，也用于填写表单时信息选择

<form action="form.php"method="post">爱好选择：
            <input type="checkbox"name="hobby"value="sing"checked="checked"/>唱歌
            <input type="checkbox"name="hobby"value="draw"checked="checked"/>画画
            <input type="checkbox"name="hobby"value="dance"/>跳舞
        </form>

七、file：文件上传按钮

文件上传按钮用于文件上传，单击“选择文件”按钮会弹出对话框，选择需要上传的文件。

 <form action="form.php" method="post" enctype="multipart/form-data ">
            <input type="file"/>
            </form>

八、submit：表单提交按钮

表单提交按钮用于提交表单数据，单击按钮后，表单中用户填写的信息会被发送到表单指定的地方进行处理。当没有 value值时，submit 按钮中默认显示的文字为“提交”。

<form action="form.php" method="post">submit框：
            <input type="submit"value="登录">
        </form>

九、reset：重置按钮

重置按钮将表单数据重置为初始状态，通常是清空表单已填内容。

<form action="form.php" method="post">
            <input type="text"value="输入框的默认值"/>
            <input type="text"placeholder="请输入"/>
            <input type="reset"/>
        </form>

十、button：可单击按钮

定义一个可单击的按钮，通常与 JavaScript一起使用来启动脚本。

<form action="form.php"method="post">
            <input type="button" value="点我！" onclick="alert('这是一个按钮!')"/>
        </form>

十一、select 下拉选择控件

在表单中通过<select>控件可以创建一个下拉式的列表或带有滚动条的列表，可以在列表中选中一个或多个选项，通常用于填写生日、所在地区等信息。开发人员提前设计好选项，让用户在填写信息时可以直接选择，更加方便用户使用。
1．<select>标签的属性
1）name=“列表名”：所有选项只有一个 name。
2）multiple=“multiple”：设置 select 控件为多选，可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。
3）size=“1”：规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，下拉列表就会显示出滚动条，表示可以查看更多选项。

十二、textarea 文本域

与<input>的 type="text"不同，<textarea>创建的文本域是多行的，文本区中可容纳无限
数量的文本，其中文本的默认字体是等宽字体。通常采用 CSS（层叠样式表）来设置其宽度
和高度。文本域常见用于论坛回复的文本框、博客的留言板等。
基本语法：

<form action="form.php">
            <textarea style="width: 200px;height: 150px;">这是文本域的内容</textarea>
        </form>

十三、button按钮

<button>的作用是定义一个按钮，与<input>创建的按钮功能类似，也可以与 JavaScript
一起使用来启动脚本。
基本语法如下：

<form action="form.php">
            <button type="button">这是一个按钮</button>
        </form>

<button>内部可以放置内容，如文本或图像。这是该元素与使用<input>创建的按钮
之间的不同之处。
注意：始终需要为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的
type 属性使用不同的默认值。