ITPub博客

首页 > 应用开发 > Html/css > HTML基础知识之表单

HTML基础知识之表单

原创 Html/css 作者:Winter 时间:2019-03-11 18:34:59 0 删除 编辑

表单的用途非常广泛,比如电子邮箱、用户注册登录、网上搜索等,简单来说,表单是一个将用户信息阻止起来的容器;

一、表单标签及属性

  • <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:禁用,只有满足某个条件后,才能选用某项功能;
  • 禁用的表单不会被提交;


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69908432/viewspace-2638102/,如需转载,请注明出处,否则将追究法律责任。

下一篇: CSS基础知识(一)
请登录后发表评论 登录
全部评论
努力学习,做最好的自己!

注册时间:2019-01-23

  • 博文量
    17
  • 访问量
    10733