美文网首页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入门(七)表单

    表单 现实生活中的表单是用来提交信息的,比 如:办理银行卡填写的申请表、找工作填 写的简历、入学时填写的个人信息表...

  • HTML5 表单

    @(HTML5)[HTML5表单] [TOC] 七、HTML5表单 新的输入型控件 email:电子邮件 tel:...

  • HTML表单的简单用法

    HTML表单的简单用法:HTML表单用于搜集不同类型的用户输入。 元素定义HTML表单。HTML表单包含表单元素。...

  • 简单介绍 HTML 表单的用法

    HTML 表单用于收集用户输入, 元素定义 HTML 表单。HTML 表单包含表单元素,表单元素指的是不同类型的...

  • HTML表单的用法

    html表单用于搜集不同类型的用户输入。

    元素 form元素定义html表单 HTML 表单包含表单元...

  • HTML入门三之表单

    表单 表单标签 form 其有几个属性 action(提交地址) method(get post提交方式)enct...

  • HTML表单-简单入门使用

    最简单的代码-所见即所得

  • HTML学习笔记(四)

    一:HTML 表单 HTML 表单用于搜集不同类型的用户输入。 元素 HTML 表单用于收集用户输入。 HTML ...

  • HTML 表单的用法

    HTML 表单用于搜集不同类型的用户输入 元素定义 HTML 表单: 所有属性如下 HTML 表单包含表单元素表...

  • 08-表单

    本节案例 表单的作用 HTML 表单用于收集用户输入。 表单form 元素定义 HTML 表单,里面需要有各种表单...

网友评论

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

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