HTML学习笔记之表单的设计

最新推荐文章于 2021-07-27 15:41:34 发布
最新推荐文章于 2021-07-27 15:41:34 发布
阅读量967 收藏 2
点赞数 1
文章标签： html 博客 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liuchang54/article/details/49272287
版权

一.建立表单

表单的主要功能是收集信息，接受浏览者在网页中的操作，并传递给CGI或ASP等服务器端的表单处理程序。一般表单由两部分组成，一是描述表单元素的HTML代码；二是客户端的脚本(如CGI或ASP程序)。

表单是网页上的一个特定区域，它由<form>标签来定义，这个标签是成对标签。<form>标签有三个属性:一是name属性，该属性用来定义表单的名称；二是method属性，该属性用来定义表单结果从浏览器传送到服务器的方式，属性的参数值一般有两种：get和post，默认参数为get；三是action属性，该属性用来指定表单处理程序(CGI或ASP等服务器端的表单处理程序)的位置。其语法格式如下：

<form name="form_name" method="method" action="url">

······

</form>


二.输入标记

<input>标签是表单中的输入标记，它是个单标签。其语法格式如下：

<input name="file_name"  type="type_name">

1.文本框

1),单行文本框

当type的类型为text时，表示该输入项输入的是字符串，输入的内容以单行显示。当type=text时，<input>标签除了有name和type属性外，还有三个可选的属性:value、size、maxlength。value属性用来设定文本框中的初始值，size属性用来设定文本框的长度，maxlength属性用来设定该文本框允许用户输入的最大字符数。其语法格式如下：

<input type="text" name="file_name" maxlength=value size=value value="file_value">

2).密码框

当type的类型为password时，其使用方法与text类似，不同之处是当浏览者输入内容时，均以*表示，以保证密码的安全性。其语法格式如下：

<input type="password" name=“file_name" maxlength=value size=value>


2.按钮

表单中的按钮起着至关重要的作用，它主要有以下几种类型：普通按钮、提交按钮和重置按钮。

1).普通按钮

当type的类型是button时，表示该输入项输入的是普通按钮，其语法格式如下：

<input type="button" name="file_name" value="button_value">

value表示显示在按钮上的文字

2).提交按钮

当type的类型为submit时，表示该输入项输入的是提交按钮，单击提交按钮后，浏览器可以将表单的输入信息传送给服务器。其语法格式如下：

<input type="submit" name="file_name" value="submit_value">

3).重置按钮

当type的类型为reset时,表示该输入项输入的是提交按钮，单击重置按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。其语法格式如下：

<input type="reset" name="file_name" value="reset_value">

一般情况下，提交和重置按钮应该同时出现。


3.单选框和复选框

1).单选框

当type=radio时，表示该输入项是一个单选项，用户只能选择单选项中的一项作为输入信息。其语法格式为：

<input type="radio" name="file_name" checked value="value">

checked表示此项默认选中，value表示选中项目后传送到服务器端的值。

2).复选框

当type=checkbox时，表示该输入项是一个复选项，用户可以同时选中表单中的换一个或多个复选项作为输入信息。其语法格式如下：

<input type="checkbox" name="file_name” checked value="value">


4.文件输入框

当type=file时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。文件输入框的外观是一个单行文本框加一个浏览按钮，用户可以将要上传的文件路径直接填写在单行文本框中，也可以单击浏览按钮进行查找，其语法格式如下：

<input type="file" name="file_name">

三.选择标记

在表单中，通过<select>和<option>标签就可以在浏览器中出现一个下拉式的菜单或带有滚动条的列表菜单。这两个选择标记均可以很好地节省网页的空间。菜单最节省网页空间，正常状态下只能看到一个选项，单击按钮打开菜单后才看到全部选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条。其语法格式如下：

<select name="name" size=value multiple>

<option value="value" selected>选项值

<option value="value" selected>选项值

······

</select>

其中，multiple属性表示列表中的项目多选，size表示显示的选项数目。

当<select>标签中有size属性和multiple属性时，表示是列表；没有时则表示下拉菜单。当然，在列表中，size属性和muliple属性并不一定要同时使用。


四.多行文本框

<textarea>标签用来制作多行文本框，这个标签是个成对标签。其语法格式如下：

<textarea name="name" rows=value cols=value value="value">

其中rows用来设定多行文本框一次能显示的行数，cols用来设定多行文本框一次能显示的列数，value用来设定多行文本框的初始值。


示例：

（一）《HTML学习日记之表单》


（二）

<html>
	<head>
		<title>表单综合应用示例</title>
	</head>
	<body>
		<form>
			<table border="1" align="center">
				<tr>
					<td colspan="2" bgcolor="blue">
						<center>
							<font size=7 color="yellow">注册程式</font>
						</center>
					</td>
				</tr>
				<tr>
					<td>用户名*</td>
					<td><input type="text" name="姓名" size="20">不能有空格，
						可以是中文，长度控制在3~12字节以内</td>
				</tr>
				<tr>
					<td>密码*</td>
					<td><input type="password" name="密码" size="21">英文字母或数字等不少于6位</td>
				</tr>
				<tr>	
					<td>确认密码*</td>
					<td><input type="password" name="密码" size="21"></td>
				</tr>
				<tr>
					<td>Email*</td>
					<td><input type="text" name="电子邮件"><input type=checkbox>公开邮箱</td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<select>
							<option value="保密" selected>保密</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>生日</td>
					<td>
						<input type=text name="年">年
						<select>
							<option value="月">1</option>
							<option value="月">2</option>
							<option value="月">3</option>
							<option value="月">4</option>
							<option value="月">5</option>
							<option value="月">6</option>
							<option value="月">7</option>
							<option value="月">8</option>
							<option value="月">9</option>
							<option value="月">10</option>
							<option value="月">11</option>
							<option value="月">12</option>
						</select>
						月
						<select>
							<option value="日">1</option>
							<option value="日">2</option>
							<option value="日">3</option>
							<option value="日">4</option>
							<option value="日">5</option>
							<option value="日">6</option>
							<option value="日">7</option>
							<option value="日">8</option>
							<option value="日">9</option>
							<option value="日">10</option>
							<option value="日">11</option>
							<option value="日">12</option>
							<option value="日">13</option>
							<option value="日">14</option>
							<option value="日">15</option>
							<option value="日">16</option>
							<option value="日">17</option>
							<option value="日">18</option>
							<option value="日">19</option>
							<option value="日">20</option>
							<option value="日">21</option>
							<option value="日">22</option>
							<option value="日">23</option>
							<option value="日">24</option>
							<option value="日">25</option>
							<option value="日">26</option>
							<option value="日">27</option>
							<option value="日">28</option>
							<option value="日">29</option>
							<option value="日">30</option>
							<option value="日">31</option>
						</select>
						日
					</td>
				</tr>
				<tr>
					<td>QQ*</td>
					<td><input type="text" name="姓名"></td>
				</tr>
				<tr>
					<td>个人主页</td>
					<td><input type="text" name="姓名" value="http://"</td>
				</tr>
				<tr>
					<td>个性化签名<br>将附在每篇文章后</td>
					<td>
						<textarea name="文本框" rows=6 cols=14></textarea>
					</td>
				</tr>
				
				<tr>
					<td>来自</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>自我简介<br>————少于100字节</td>
					<td>
						<textarea name="文本框" rows=6 cols=14></textarea>
					</td>
				</tr>
				<tr>
					<td>是否接受邮件系统</td>
					<td><input type="radio" name="city" value="接收邮件" checked>接收邮件
						<input type="radio" name="city" value="不接收邮件">不接收邮件
					</td>
				</tr>
				<tr>
					<td colspan=2 align=center>
						<input type="submit" value="提交">
						<input type="reset" value="重置"
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

运行结果：


SAP 皮德憨
关注
专栏目录
HTML学习笔记（五）——表单
01-08
HTML中的表单是网页设计中不可或缺的部分，它们用于收集用户数据，实现用户与网页的交互。表单在诸如用户注册、在线购物、联系方式提交等多种场景中广泛应用。HTML5对传统表单进行了重大改进，提供了更丰富的功能和...
HTML：form表单域的作用和三个常用属性
weixin_46682277的博客
12-02 3265
我们收集到的用户信息怎么传输给后台服务器，form表单域可以帮我们做到。 form标签被定义于表单域，相当于一个大的容器，包含在form表单域中的内容都会提交给服务器。 <form action="url地址" method="提交方式 name="表单名称"> 各种表单控件 table tr td等 </form> 只要是在form表单域中的内容，都会提交给后台服务器。 form有三个常用的属性： action，他的属性值是url地址，用于指定接收并处理表单数据的服务器程序的ur
Form表单method属性的两种提交方式Get和Post的区别
热门推荐
Java开发，人工智能，边缘计算，致力于掌握前沿技术
06-16 1万+
Mothod属性是控制表单的提交方式的。 表单提交方式有两种：post方式的提交，get方式提交（默认的方式）。 两者的区别： 1.get方式的提交，表单元素对应的值会以?key=value&key=value的方式显示在地址栏里面。Post方式不会。Post要相对安全一些。 2.因为get方式要把数据显示在地址栏里面，所以他可以传递的数据量是有限制的。Post的大小是没有限制的。 3....
HTML课堂讲义（5）
不惧神风的博客
07-22 662
HTML课堂讲义（5），这次是关于表单的内容，包括了一个表单的雏形。也介绍了表单form标签的一个重要属性input。
POST 还是 GET？
zhuhuiby
08-28 803
如果表单处理服务器既支持 POST 方法又支持 GET 方法，那么你该选择哪种方法呢？下面是有关这方面的一些规律： 如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和
表单相关知识
qq_59641085的博客
07-27 182
一、表单 1.表单：收集用户信息 2.表单的组成部分:表单域【表单的区域】+表单控件【input】+提示信息【请输入姓名】 3.应用:登录注册界面等等 4.表单控件:单选框只能选择一个，必须有那么属性，而且name属性值必须一致【同一组单选框】type="radio" 5.复选框可以选择多个type="checkbox" 6.选择文件type="file" 7.下拉菜单...
AngularJS学习笔记之表单验证功能实例详解
10-19
在结束这篇关于AngularJS表单验证的分析之前，需要强调的是，良好的表单设计和验证机制对于提升用户友好性和数据准确性至关重要。AngularJS作为一个强大的前端框架，通过其内置的表单验证功能以及灵活的扩展性，为...
html经典学习笔记.zip
11-01
"HTML经典学习笔记"是一个压缩包文件，包含了深入理解和学习HTML的重要资料。这个压缩包可能包含了一系列的章节、实例和练习，旨在帮助学习者掌握HTML的基本语法、元素以及如何创建动态和交互式的网页。 在HTML的...
HTML5程序设计学习笔记
11-16
### HTML5程序设计学习笔记 #### 一、`<!DOCTYPE>`标签的作用与使用方法 `<!DOCTYPE>`标签作为HTML文档的首个元素，在整个文档解析过程中起着至关重要的作用。它告诉浏览器当前文档遵循的是哪种HTML标准，从而确保...
form标记
hldfight
08-04 1989
人们在网站登陆信息时，网站要提供给用户用户名文本框与密码文本框，这就是HTML中的表单元素。 表单在此标记内设置，有如下属性： 1、action，为处理表单的页面的URL地址； 2、method，指定数据传送到服务器的方式，它有两种属性值，分别为get和post。get属性值表示将输入的数据追加到action指定地址的后面，并传送到服务器。属性值为post时，会将输入的数据按照HTTP协议
[HTML]表单form的method属性get/post区别
solo_Insomnia的专栏
09-12 3091
一、问题的提出    action="getPostServlet/getPost.do?param4=param4" method="get">                      button1" value="submit"> 注意到表单中action：getPostServlet/getPost.do?param4=param4 这个action带有一个参数pa
关于表单中的method属性中的post和get值
weixin_45517904的博客
08-27 1163
post：有许多字段，或者有很长文本域的表单/较为安全 get：传少数简短字段，并获得最佳表单传输性能/安全性不高/在表单之外调用服务器的应用程序
HTML介绍
weixin_30677475的博客
12-12 156
一. HTML介绍 　　Web服务本质 :就是c/s架构,浏览器是客户端 通过python写文件并执行,让浏览器访问这个地址就可以 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.acc...
form表单新增的三个属性，form属性，multiple属性，pattern属性。
lyz-yuan的博客
10-24 8379
适合前端的小伙伴一同学习，不喜勿喷
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...
Form表单的两个重要属性
anhuang5101的博客
10-08 671
HTML <form> 标签的 enctype 属性 定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。 默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。 实例 ...
html 中 form 标签中的 method属性
biu_bui_biu的博客
11-03 6551
form 标签的一般写法 ： <form action="提交表单后动作" method="methodValue"> 其中methodValue 一共有两种值，分别代表着两种form 表单提交模式。 其中： post 模式下：浏览器将会与action 属性中指导的表单处理服务器建立联系，一旦建立联系之后，浏览器就会按分段传输的方法将数据发送给服务器。 ...
GET/POST
lysunki的博客
11-21 485
HTML 标签的 method 属性 HTML 标签 定义和用法 method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。 表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。 实例 在下面的例子中，表单数据将通过 method 属性附加到 URL 上： [cod...
表单form里的method属性post、get
dawuafang
09-29 979
表单form里有个method属性，method属性有两个值分别为post和get 这个属性如果没有指定时默认为get post和get的区别： post传递的数据量大，而get传递的数据量小 下面是网上搜到的两者的区别： 1.get是从服务器上获取数据，post是向服务器传送数据。 2.get是把参数数据队列加到提交表单的action属性所指定的URL中，值和表单内各个字段一一对...
HTML5学习笔记：优势、语法与表单元素详解
HTML5的学习笔记涵盖了从基础语法到高级特性的全面内容，包括语义化、表单设计、多媒体处理和现代通信技术，这对于提升网页开发效率和兼容性具有重要意义。对于前端开发者而言，掌握HTML5不仅是技术更新的要求，也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值