web入门学习

html入门(七)表单

2018-09-11  本文已影响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>

上一篇下一篇

猜你喜欢

热点阅读