详解HTML表单

本篇内容介绍了“详解HTML表单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、表单标签及属性

• <form>标签就是表单标签，该标签用于在网页中创建表单区域，属于一个容器标签；

• action：表单的属性之一，用于指示服务器上处理表单输出的程序；

• method：表单属性之一，此属性告诉浏览器如何将数据发送给服务起，指定向服务器发送数据的方法，是用post或者get；

 <form action="#" method="post">
        <p>密码：<input type="text" name="pwd"></p>
        <p>
            <input type="submit" value="提交"/>
            <input type="reset" value="重填"/>
        </p>
    </form>

1.png

二、GET 方法和POST 方法的区别

Get方法：

• GET 请求可被缓存；

• GET 请求保留在浏览器历史记录中；

• GET 请求可被收藏为书签；

• GET 请求不应在处理敏感数据时使用；

• GET 请求有长度限制；

• GET 请求只应当用于取回数据；

POST方法：

• POST 请求不会被缓存；

• POST 请求不会保留在浏览器历史记录中；

• POST 不能被收藏为书签；

• POST 请求对数据长度没有要求；

三、表单元素

 <form action="#" method="post" style="margin:0 auto;width: 1000px;margin-top:100px;">
        <p>姓名：<input type="text" /></p>
        <p>邮箱：<input type="text" /></p>
        <p>地址：<input type="text" /></p>
        <p>性别：男<input type="radio" checked/>&nbsp;女<input type="radio"/></p>
        <p>爱好：篮球<input type="checkbox" />&nbsp;羽毛球<input type="checkbox" checked/>&nbsp;足球<input type="checkbox"/></p>
        <p>今天星期：            <select name="weekday" size="1">
               <option value="1">星期一</option>
               <option value="2">星期二</option>
               <option value="3" selected>星期三</option>
               <option value="4">星期四</option>
               <option value="5">星期五</option>
               <option value="6">星期六</option>
               <option value="7">星期七</option>
            </select>
        </p>
        <p>密码：<input type="password" /></p>
        <p>确认密码：<input type="password" /></p>
         
        <p>
            <input type="submit" value="提交按钮"/>
            <input type="reset" value="重填按钮"/>
            <input type="button" value="普通按钮"/>
        </p>
    </form>

以上代码的演示结果图为：

2.png

（1）<input>标签

• type属性：指定表单元素的类型，可选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text；

• name属性：指定表单元素的名称；

• value属性：可选，指定表单元素的初始值；

• checked：指定按钮是否被选中；

• size属性：指定表单元素的初始宽度；

• maxlength属性：指定可在text或password元素中输入的最大字符数；

（2）三种按钮

• reset按钮：重置按钮，将表单重置为最初状态；

• submit按钮：提交按钮，用户单击按钮后，表单将会提交到action属性所指的URl，并传递表单数据；

• button按钮：普通按钮，需要与事件关联使用；

四、表单的只读与禁用设置

• readonly：只读，网站服务器方不希望用户修改的数据，这些数据在表单元素中显示；

• disabled：禁用，只有满足某个条件后，才能选用某项功能；

• 禁用的表单不会被提交。

“详解HTML表单”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！