2_31_表单_190924

最新推荐文章于 2021-12-03 14:11:50 发布
最新推荐文章于 2021-12-03 14:11:50 发布
阅读量421 收藏
点赞数
文章标签： 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XY061120/article/details/102535619
版权

表单

是一个容器，用来存储客户端（浏览器）用户填写的信息的容器，通过提交按钮将表单容器里面的信息提交到服务器存储起来，以后可以调用。

 1、<form></form>标签
 默认属性：
<form  id=”…” name=”…” action=”…” method=”…”  target =”…” enctype=”…” onsubmit=”…”  onreset=”…”></form>
   ①
<form id="register1" name="register" action="/login" method="get/post"></form>
   ②
<form id="register2" name="register" action="" method="get/post">
</form>

id：指的是表单的id（唯一），js通过表单id操作表单。(id、name 必须写上，以后js和服务器端会用到)

 如：身份证号
    501107 19990909 0832(X)

name：指的是表单的名字（不唯一），同上
action：指的是处理表单或者接收表单信息的url
method：指的是表单提交的方法，默认get（不安全）post（安全）
target：目标窗口

 2、<input/>（<input>）标签
  表单里面的控件，嵌套在<form>标签内。
  
  表单中可以包含很多控件，其中，用<input type=””>标签定义的控件有：
  单行文本框、密码框、提交按钮、重置按钮、普通按钮、单选按钮、复选框以及上传文件按钮 等。这些控件是表单的核心控件，在表单设计中被频繁地使用。

（1） 单行文本框
指的是表单中可以输入一行文本的输入框，通过设置< input > 标签的type 属性为 text 来指定。

其格式如下：
<input type=“text” name=“…” value=“…” size=“…” maxlength=“…” onchange=“…” onselect=“…” onfocus=“…”/>

<input type=”text” name=”…”/>

其中：
name 指的是单行文本框的名称；
value 指的是单行文本框的默认的初始值；
size 指的是单行文本框的显示宽度；
maxlength 指的是单行文本框允许用户输入的最大的字符数；
onchange 指的是当文本框内文本发行改变时调用的脚本语句或函数；
onselect 指的是当文本框内的文本被选中时调用的脚本语句或函数；
onfocus 指的是当文本框获得焦点时调用的脚本语句或函数；
onclick

（2） 密码框
密码框通过指定< input >标签的 type 属性值为 password 来实现。在密码框中输入字符时，显示的都是 * 或者实心圆点，密码框的用法和单行文本框的用法基本相同。

其格式如下：
<input type=“password” name=“…” value=“…” size=“…” maxlength=“…” onchange=“…” onselect=“…” onfocus=“…”/>

<input type=”password” name=”…”>

（3） 提交按钮
提交按钮通过指定< input>标签的 type 属性值为 submit 来实现。单击了提交按钮后，提交按钮所在的表单的内容会被提交到表单标签中action属性所指的处理程序。

其格式如下：
<input type=“submit” value=“…”/>

其中，value 指的是提交按钮上显示的提示文字，一般为“Submit”或者“提交”。

（4） 重置按钮
重置按钮通过指定< input>标签的type属性值为reset来实现。当单击重置按钮时，重置按钮所在的表单中的所有控件的内容将会被清除，回到控件的默认的初始值，可以重新在控件中输入数据。

其格式如下：
<input type=“reset” value=“…”/>

其中，value指的是重置按钮上显示的提示文字，一般为 “Reset” 或者 “重置”。

（5） 普通按钮
除了以上提交按钮和重置按钮之外，还可以使用普通按钮。通过设置< input>标签的type属性值为button来实现。在表单中使用普通按钮，必须使用onclick调用处理脚本或脚本函数。

使用格式如下：
<input type=“button” name=“…” value=“…” onclick=“…” onfocus=“…”/>

其中：
name 指的是普通按钮的名字；
value 指的是普通按钮上的提示文字；
onclick 指的是当单击普通按钮时执行的脚本语句或函数；
onfocus 指的是当普通按钮获得焦点时执行的脚本语句或函数；

（6） 单选按钮
单选按钮通过指定< input>标签的 type 属性值为 radio 实现。

其格式如下：
<input type=“radio” name=“…” value=“…” onclick=“…” onfocus=“…” checked />

其中：
name 指的是单选按钮的名称，多个单选按钮属于同一个选项组，必须具有相同的 name 值；
value 指的是单选按钮的值；
checked 属性项可选，如果单选按钮的默认状态为被选中， 则将checked写在其属性列内；如果不将checked写在其属性列内，则单选按钮的默认状态为未选中；
onclick 指的是当单击单选按钮时执行的脚本语句或脚本函数；
onfocus 指的是当单选按钮获得焦点时执行的脚本语句或脚本函数；

（7） 复选按钮
复选按钮通过指定< input>标签的type属性值为checkbox来实现。

其使用格式如下：
<input type=“checkbox” name=“…” value=“…” onclick=“…” onfocus=“…” checked/>

复选按钮默认的选中状态也通过c hecked 指定，多个复选按钮是否处于同一个选项组也通过 name 属性指定。其属性可参照单选按钮的属性说明。

（8） 隐藏域
表单中的隐藏域在浏览器中是不可见的，因此用户不能借助隐藏域进行交互操作。一般通过隐藏域来传递一些为开发者服务的信息，例如动态方法的调用、Session会话跟踪等。
隐藏域通过指定< input>标签的type属性值为hidden来实现。

其格式如下：
<input type=“hidden” value=“…” name=“…”/>

（9） 上传文件域
上传文件域通过指定< input>标签的 type 属性值为 file 来实现。它包括一个文本框和一个按钮。

其格式如下：
<input type=“file” name=“…” value=“…”/>

其中：
name 指的是上传文件域的名称；
value 指的是上传文件域中的按钮的提示文字，一般为 “选择文件” 或 “浏览……”。

（10） 日期选择框
日期选择框通过指定< input>标签的 type 属性值为 date 来实现

其格式如下：

<input type="date" id="birthday" name="birthday">生日

（11） 文本域

其格式如下：
<textarea rows="5" cols="20">

（12） 下拉菜单
下拉列表使用一对标签来实现。

其格式如下：
<select name=“…” >
 <option value=“…” selected=“selected”>选项1提示信息</option>
 <option value=”…”>选项2提示信息</option>
</select>

总结：
1.表单当中 < form> 、 < input> 有 id 、name 这两个共同属性。
2. < input> 当中通过改变 type 的值来改变控件类型，type 里面有 10 中类型
text（单选框）、 password（密码框） 、 submit （提交按钮）、 reset（重置按钮）、 button（普通按钮）、 radio （单选按钮）、 checkbox（复选按钮）、hidden（隐藏域）、file（上传文件）、date（日期）。

练习：
（1）
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单与表格</title></head>
<body>
	<form>
	<table cellspacing="0" cellpadding="15" border = "1px">
		
			<h2>表单与表格结合练习</h2>
			<tr>
				<td align="center">姓名：</td>
				<td><input type="text" name="name"/></td>
			</tr>
			
			<tr>
				<td align="center">密码：</td>
				<td><input type="password" name="password"></td>
			</tr>
			
			<tr>
				<td align="center">确认密码：</td>
				<td><input type="confirm password" name="confirm password"/></td>
			</tr>
		
			<tr>
				<td align="center">邮箱:</td>
				<td><input type="e-mail" name="e-mail"/></td>
			</tr>
			
			<tr>
				<td align="center">性别：</td>
				<td  align="center">
					<input id="man" type="radio" name="1" />男
					<input id="gender" type="radio"  name="1"/>女
				</td>
			</tr>
		
			<tr>
				<td align="center">爱好：</td>
				<td  align="center">
					<input type="checkbox" name="hobby" />吃饭
					<input type="checkbox"  name="hobby"/>玩耍
					<input type="checkbox"  name="hobby"/>休息
				</td>
			</tr>
			
			<tr>
				<td align="center">城市：</td>
				<td  align="center">
					<select name="..." >
					<option value="..." selected="selected">请选择</option>
					<option value="...">选择</option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td align="center">自我介绍：</td>
				<td  align="center">
					<textarea rows="4" cols="20">属于你的个人介绍，请填写</textarea>
				</td>
			</tr>
			
			<tr>
				<td align="center" colspan="2"><input type="button" value="立即注册"></td>
			</tr>
			
	</table>
	</form>

</body>
</html>

（2）
在这里插入图片描述

代码

各种标签的综合练习：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
</head>
<body>
	<p><b>&nbsp &nbsp &nbsp &nbsp《无序列表》</b></p>
		<ul>
			<li>编号</li>
			<li>名称</li>
			<li>数量</li>
			<li>单价</li>
			<li>金额</li>
		</ul>
		
	<p><b>&nbsp &nbsp &nbsp &nbsp《有序列表》</b></p>
		<ol start="5">
			<li>编号</li>
			<li>名称</li>
			<li>数量</li>
			<li>单价</li>
			<li>金额</li>
		</ol>
		
	<p><b>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp《表格》</b></p>
<table cellspacing="0" cellpadding="6" border="1px">
<caption>购物车</caption>
	<tr style="background-color: #c0c0c0">
		<th>编号</th>
		<th>名称</th>
		<th>数量</th>
		<th>单价</th>
		<th>金额</th>
	</tr>
		
	<tr>
		<td rowspan="3">1</td>
		<td>电脑</td>
		<td>2</td>
		<td>6000</td>
		<td>12000</td>
	</tr>
		
	<tr>
		<td>手机</td>
		<td>5</td>
		<td>3000</td>
		<td>15000</td>
	</tr>
		
	<tr>
		<td>笔记本</td>
		<td>1</td>
		<td>4000</td>
		<td>4000</td>
	</tr>
		
	<tr>
		<td align="center" colspan="4">总计：</td>
		<td>31000</td>
	</tr>
</table>

<form id="" action="" method="get" name="register">
	<p><b>用户注册</b></P>

	账号：<input type="text" name="不超过八个字符" value="不超过八个字符"/>
<br/>
<br/>
	密码：<input type="text" name="" value="6-16个字符"/>
<br/>
<br/>
	邮箱：<input type="e-mail" name="" value="example@mail.com"/>
<br/>
<br/>
	年龄：<input type="age" name="age"/>
<br/>
<br/>
	生日：<input type="text" name="birthday" value="年/月/日">
<br/>
<br/>
	课程：	<select name="..." >
				<option value="..." selected="selected">HTML5</option>
				<option value="...">选择</option>
			</select>
<br/>
<br/>			
	爱好：	<input type="checkbox" name="hobby" />打游戏
			<input type="checkbox"  name="hobby"/>看电影
			<input type="checkbox"  name="hobby"/>撸代码
<br/>
<br/>			
	性别：	<input id="man" type="radio" name="1" />男
			<input id="gender" type="radio"  name="1"/>女
			<input id="baomi" type="radio"  name="1"/>保密
<br/>
<br/>	
	
	简介：	<textarea rows="10" cols="30"></textarea>
<br/>
<br/>	
			<input type="button" value="提交">
			<input type="button" value="Ajax">
</form>

</body>
</html>

（3）个人简历

http://www.hotjob.cn/wt/ICBC/web/index/showNewResume?operational=1f5371712e4d8fc94abdf68c74cfc12d4a31fd287e953bc27f72676b78141d4a946938a1202b071b9a409951fbf555b8062ca2d3c3b552a9
梦想_倩
关注
flowable 表单前端_flowable表单引擎
weixin_39778214的博客
12-21 2624
flowable表单引擎作为一个独立的模块，也包括表单定义，部署等过程。1. API及与流程引擎的结合如下图所示，表单引擎也有一个独立的配置文件，配置类，配置引擎及三个Service. 在实际使用中我们也是将其配置嵌入到流程引擎的配置中，配置形式如下(省略了非相关配置)：在应用重启时数据库中会增加act_fo_为前缀的六张数据库表格：act_fo_databasechangelog: Liquib...
关于form与表单提交操作的一切
qq_45248129的博客
07-27 638
著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 链接:http://caibaojian.com/form.html 来源:http://caibaojian.com 你知道，一个表单里面只要有form元素，如果没有给action加一个默认值，为空白的时候，当你刷新页面时，会弹出一个警告框提示你已经填入表单，刷新数据将会丢失。 如果一个表单里面有一个type="submit"的button、或者type="submit"的input，或者type="image"的input，点击则会
HTML中的表单<form>标签
weixin_30299539的博客
08-04 253
一、HTML表单 HTML 表单用于搜集不同类型的用户输入。 二、HTML元素 (一) <form> 元素 <form>元素用以定义HTML表单 <form>.... </form> 1. action 属性 action 属性定义在提交表单时执行的动作。 向服务器提交表单的通常做法是使用提交按钮,...
form表单的三个属性 action 、mothod 、 enctype。
banchenglian3454的博客
10-24 648
form_action: 表单数据提交到此页面 下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 "form_action.asp" 的页面： <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname...
【无标题】
xxxxxxxr的博客
12-03 94
HTML 表单用于搜集不同类型的用户输入。 <form> 元素 HTML 表单用于收集用户输入。 <form> 元素定义 HTML 表单： HTML 表单包含表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 <input> 元素 <input>元素是最重要的表单元素。 <input> 元素有很多形态，根据不同的type属性。 text 定义常规文本输入。 radio ...
使用提交按钮，提交数据
bailang3277的博客
05-29 188
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。 语法： <input type="submit" value="提交"> type：只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字 举例： 在浏览器中显示的结果： 转载于:https...
按钮提交表单
wyaspnet的专栏
07-28 1万+
2.3  提交表单数据ASP.NET Framework包含三个用于向服务器端提交表单的控件：Button、LinkButton和ImageButton。这三个控件拥有同样的功能，但每种控件的外观截然不同。本节学习如何在页面中使用这三种控件。然后，学习如何关联客户端脚本和服务器端Button控件，以及如何使用Button控件把一个表单传到不是当前页的页面。最后，学习如何处理Button
Lesson02_04 表单标签(2)
10-31
Lesson02_04 表单标签(2)
Adobe_LiveCycle_ES2_表单应用
05-25
Adobe_LiveCycle_ES2_表单应用
对话框_对话框属性页_属性页_属性表单_CProperytSheet_CProperytPage_VC_VC++_源码
04-15
2. **对话框属性页**：当一个对话框需要展示多个相关的设置时，属性页（Property Sheet）是很好的选择。属性页由多个独立的页面组成，每个页面都是一个单独的对话框，用户可以通过标签在这些页面间切换。在MFC中，`...
mysql表单设计_【mysql】自定义表单系统 如何设计数据库
weixin_35772916的博客
01-19 2202
问题描述需求是这样的：1、由客户来根据需求设计表单内容样式 点击保存后 前端可以生成JSON格式数据，JSON数据如下：{"list": [{"type": "input","options": {"width": "100%","defaultValue": "","required": true,"dataType": "string","pattern": "","placeholder":...
html表单提交按钮程序,表单 - 提交按钮
weixin_42392689的博客
06-23 1660
定义用于向表单处理程序(form-handler)提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指定：实例:First name:Last name:screenshot.pngAction 属性action 属性定义在提交表单时执行的动作在上面的例子中,制定了某个服务器脚本来处理被提交的表单:如果省略 action 属性, ...
【表单】表单数据的提交和处理
bandaoyu的note
07-05 3638
1、什么是表单 （转自：https://blog.csdn.net/ixygj197875/article/details/79904298） HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。 表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分...
前端问题：button按钮在form表单的时候会当成submit提交
LZHHuo的博客
08-12 1496
button按钮在form表单的时候会当成submit提交 input type=“button" PS：遇到了一个坑是，button按钮在form表单的时候会当成submit提交，千万不要再当作button用了，如果想用button就用input type=“button" 来搞。 ...
使用jQuery实现点击提交按钮把input的内容提交到表单中
TL的博客
09-29 5163
使用jQuery首先需要导入相应的依赖文件 <script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script> 表单界面：点击添加按钮实现把input中的内容添加到表单中 页面代码： <div clas...
点击提交按钮时用Jquery获取表单内容
路漫漫其修远兮，吾将上下而求索
07-10 2241
需求：在点击提交按钮时，用jQuery获取表单的内容，包括姓名密码等信息，并存储在一个json对象中 代码&注释: <!DOCTYPE html> <html> <head> <title> test </title> <script src="jquery-3.5.1.js"></script> </head>
在 Oracle 中一句话建表加数据
甘谷天蚕网络技术有限公司
07-17 176
今天遇到一个问题，需要将库钟表结构和数据全部加到一个系统中现在还不存在的表中。记得上大学自学 M$ SQL 时曾经学过这样的东西，但是天长日久，这毕业一年多时间，到用的时候又给忘掉了，真ＴＭ郁闷。后来问了一下公司的 SQL 高手，这才搞定。   为了防止历史重演，先将它放在我的 Blog 里。   具体语法格式如下： sql 代码 CREATE TABLE [TABLENAME_...
javascript在form表单中使用button按钮实现submit提交方法
热门推荐
有种轰趴我
01-22 1万+
在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法： 使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在javascript中实现具体，代码如下： function submitBtnClick(){ document.fileForm.submit(); } 检索
金和OA_C6自定义表单设计指南
"金和OA_C6-自定义表单操作手册" 金和协同管理平台C6是一款企业级的协同办公软件，其自定义表单功能是该系统的一大亮点，允许用户根据自身业务需求定制各类表单，以提高工作效率和数据管理的灵活性。本手册详细介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值