爬虫配套学习-前端学习笔记05-表单

单的用途很多,在制作网页,特别是制作动态网页时常常会用到。表单主要用来收集客户端提供的相关信息,使网页具有交互功能。在网页制作的过程中,常常需要使用表单,如进行会员注册、网上调查和搜索等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息,然后单击某个按钮提交这些信息 。

标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。

 在表单的标记中,可以设置表单的基本属性,包括表单的名称、处理程序和传送方法等。

 一般情况下,表单的处理程序action和传送方法method是必不可少的参数。

 表单的method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法,可取值为get或post。

get:表单数据被传送到action属性指定的URL,然后这个新URL被送到处理程序上。

post:表单数据被包含在表单主体中,然后被送到处理程序上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里放入网页的标题</title>
</head>

<form name="form1" method="post" action="index.htm" >
姓名:
<input name="name" type="text" size="15" value="XXC"/>
<!-- 默认姓名为XXC -->

<br />
年龄:
<input name="age" type="text" size="10" value="15" maxlength="2" />
<!-- 这里设置了参数,默认年龄为15,最大长度为2 -->
</form>
<body>
</body>
</html>

效果
在这里插入图片描述

<!-- 2.	插入表单对象 <Input Type=“?”>
•	"(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里放入网页的标题</title>
</head>

<body>
<form name="form1" method="post" action="index.htm">

用户名:
<input name="username" type="text" size="15" value="XXC"/>
<!-- 默认姓名为XXC -->

<br />
密码:
<input name="password" type="password" value="abcdef" size="10" maxlength="6" value="123456"/>

<!-- 设置默认密码为123456 -->
</form>

</body>
</html>

效果
在这里插入图片描述

<!-- 2.	插入表单对象 <Input Type=“?”>
•	"(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里输入网页标题-单选按钮</title>
</head>

<body>
<form action="index.htm" method="post" name="form1">
性别:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" /><input type="radio" name="radiobutton" value="radipbutton" /></form>
</body>
</html>

效果
在这里插入图片描述

<!-- 2.	插入表单对象 <Input Type=“?”>
•	"(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框</title>
</head>

<body>
<form name="form1" method="post" action="index.htm">
爱好选择(可多选):
<input name="checkbox" type="checkbox" value="checkbox" checked="checked" />
游泳
<input name="checkbox1" type="checkbox" value="checkbox" />
打高尔夫
<input name="checkbox2" type="checkbox" value="checkbox" />
冲浪
<input name="checkbox3" type="checkbox" value="checkbox" />
看小说
</form>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>普通按钮</title>
</head>

<body>
<form name="form1" method="post" action="index.htm">
单击此按钮可以关闭窗口。
<br />
<input name="button" type="button" value="关闭窗口" onclick="window.close()" />
</form>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题-提交按钮</title>
</head>

<body>
<form name="form1" action="index.htm" method="post">
姓名:
<input name="textfield" type="text" size="15" value="XXC" />
<br />
年龄:
<input name="textfield2" type="text" size="10" value="15" />
<br />
性别:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" /><input name="radiobutton" type="radio" value="radiobutton" /><br/>
<input type="submit" name="submit" value="提交" />
</form>
</body>
</html>

效果
在这里插入图片描述

<!-- 2.	插入表单对象 <Input Type=“?”>
•	"(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件域</title>
</head>

<body>
<body>
<form name="form1" action="index.htm" method="post" enctype="mutipart/from-data">

上传照片:
<input name="textfield1" type="files" size="30" maxlength="32" />
<br />
</body>
</html>

效果
在这里插入图片描述

<!-- 2.	插入表单对象 <Input Type=“?”>
•	"(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题-下拉菜单</title>
</head>

<body>
<form name="form1" method="post" action="index.htm">
地区:
<select name="select">
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="山东">山东</option>
<option value="河南">河南</option>
</select>
</form>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题-提交按钮</title>
</head>

<body>
<form name="form1" action="index.htm" method="post">
姓名:
<input name="textfield" type="text" size="15" value="XXC" />
<br />
年龄:
<input name="textfield2" type="text" size="10" value="15" />
<br />
性别:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" /><input name="radiobutton" type="radio" value="radiobutton" /><br/>

家庭住址:
<input name="textfield" type="text" size="30" value="华盛顿" />
<br />

联系电话:
<input name="textfield" type="text" size="30" value="1114511451111" />
<br />



您对我们的VAN具是否满意:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
非常满意
<input name="radiobutton" type="radio" value="radiobutton" />
一般
<input name="radiobutton" type="radio" value="radiobutton" />非常差
<br/>


意见:
<input name="textfield" type="text" size="30" value="东西很不错,没有意见" />



<input type="submit" name="submit" value="提交" />
</form>
</body>
</html>

效果
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丰。。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值