爬虫配套学习-前端学习笔记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>

效果

爬虫配套学习-前端学习笔记05-表单相关推荐

第二次网页前端培训笔记（表单，INPUT及常用字符）
1.表单 form 2. INPUT <form action="#" method="get" id="myform" name=& ...
python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
ASP.NET MVC 2 学习笔记二: 表单的灵活提交
ASP.NET MVC 2 学习笔记二: 表单的灵活提交前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...
【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
【PHP学习】—PHP连接数据库实现表单页面的验证功能（七）
[PHP学习]-PHP连接数据库实现表单页面的验证功能(七)
前端页面与form表单提交：代码分享
今天分享下"前端页面与form表单提交:代码分享"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
前端之表格，表单，列表
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.表格 # HTML 第二天目标能够利用表格.列表和 ...
And Design：拓荒笔记——Form表单
And Design:拓荒笔记--Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...
前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明该项目是进行表格布局表 ...
组件分享之前端组件——用于自定义表单的前端组件form-create
组件分享之前端组件--用于自定义表单的前端组件form-create 背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各 ...

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

爬虫配套学习-前端学习笔记05-表单相关推荐

最新文章

热门文章