美文网首页web入门学习
html入门(七)表单

html入门(七)表单

作者: 我本无常 | 来源:发表于2018-09-11 16:16 被阅读9次

    表单

    现实生活中的表单是用来提交信息的,比 如:办理银行卡填写的申请表、找工作填 写的简历、入学时填写的个人信息表。这 些都是表单的一种
    网页中的表单是用来向服务器提交信息的, 我们最常用到的表单就是baidu的搜索框
    表单可以将用户填写的信息提交的服务器
    文本框
    <input type="text" name="name">
    密码框
    <input type="password" name="pwd">
    多选框
    <input type="checkbox" name="sports" >篮球
    <input type="checkbox" name="sports">羽毛球
    <input type="checkbox" name="sports">乒乓球
    <input type="checkbox" name="sports">足球
    单选框
    <input type="radio" name="gender" value='male'>男
    <input type="radio" name="gender" value='female'>女
    提交按钮
    <input type="submit" value="提交">
    下拉列表
    <select>
    <option>北京</option>
    </select>

    input

    input是我们使用的最多的表单项,它可以 根据不同的type属性呈现不同的状态。
    type属性可选值:
    text:文本框
    password:密码框
    submit:提交按钮
    radio:单选按钮
    checkbox:多选框
    reset :重置按钮

    select、option

    select用于创建一个下拉列表。
    option表示下拉列表中的列表项。

    <select>
            <option values=''>A</option>
            <option values=''>B</option>
            <option values=''>C</option>
    </select>
    

    optgroup用于为列表项分组。

    textarea

    textarea用来创建一个文本域,实际效果和 文本框类似,只是可以输入多行数据。
    可用属性:
    cols:文本域的列数
    rows:文本域的行数

    fieldset、legend、label

    fieldset用来为表单项进行分组。
    legend用于指定每组的名字。
    label标签用来为表单项定义描述文字。

    method

    浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法:POST 方法和 GET 方法。
    如果采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。
    在服务器端,一旦 POST 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
    另一种情况是采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
    一般浏览器通过上述任何一种方法都可以传输表单信息,而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method (方法)属性中指明表单处理服务器要用方法来处理数据,使 POST 还是 GET。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form action="day1.html" method="get">
        账号
        <input type="text" name='username'><br>
        密码
        <input type="password" name="userpwd"><br>
        <input type="submit" value="提交">
        </form>
    </body>
    </html>
    

    框架集

    frameset 不能和body同时出现
    <frameset rows="50% 50%">(上下各一半) clos="50% 50%"(左右各一半)
    <frame src=""/>引入网页
    <frame src=""/>
    </farmrset>

    相关文章

      网友评论

        本文标题:html入门(七)表单

        本文链接:https://www.haomeiwen.com/subject/fvyugftx.html