HTML--表单

已于 2024-07-12 23:13:33 修改
阅读量846 收藏 16
点赞数 11
分类专栏： Web前端 文章标签： html 前端
于 2024-07-12 23:12:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ONE__PIECE__/article/details/140369382
版权

目录

一.表单概念

语法：

二.表单中的标签

         框图标签

效果展示

下拉菜单标签

效果演示 

多行文本域

文件域

效果演示

 邮箱标签 

效果演示 

网址标签

 三.案例

效果演示  

 四.表单高级应用

 隐藏域属性

只读属性

禁用 属性

 表单元素标注 

五.表单验证方法

 placeholder

效果演示 

 required

pattern 

 效果演示

一.表单概念

HTML表单是网页上用于收集用户输入信息的一种元素。它由一系列输入字段（input）、选择字段（select）、文本区域（textarea）以及提交按钮（submit）等组成。

表单的目的是收集用户的数据并将其发送到服务器进行处理。用户可以在表单中输入文本、选择选项、上传文件等。然后，当用户点击提交按钮时，表单的数据会被发送到定义的处理程序或服务器端脚本进行处理。

语法：

method常用值
GET向服务器发送数据请求，适合用于获取数据
POST向服务器发送数据请求，适合用于发送数据

二.表单中的标签

  •  框图标签

<input />：

 在HTML中，表单是用来收集用户输入的一种元素。表单中的input元素被用来定义输入字段，用户可以在这些字段中输入文本、数字、日期等不同类型的数据。

input 常用属性
type

定义框图类型，常见的值有text(文本),password(密码),submit(登录)

reset(重置) radio(单选) checkbox(多选) button(普通按钮)

image(图片)

name定义当前框图的名字，服务器将用户在框图中输入的信息保存到对应名字的框图中。
value

保存用户通过该框图输入的信息，该值自动生成。

框图类型为按钮时，可使用value将提示内容显示在按钮上

size设置框图长度
length设置框图支持输入信息的自大长度
checked默认选中该框图
<body>
		<!--声明表单并添加属性-->
		<form method="get" action="welcome.html">
		<p><!--input:声明文本框并添加属性-->
			请输入账号：<input type="text" name="UserCode"  />
		</p>	
		<p><!--密码框-->
			请输入密码：<input type="password" name="UserPwd" />
		</p>
		<p><!--登录/重置按钮-->
			<input type="submit" value="登录" />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="reset" value="重置" />
            <!--图片按钮-->
			<input type="image" src="HTML.Png" width="100px" height="100px" />
		</p>
		<p><!--单选按钮--><!--一个name对应一个value-->
			请选择性别：
			<input type="radio" name="UserSex" value="男" checked /> 男
			<input type="radio" name="UserSex" value="女" /> 女
		</p>
		<p><!--多选按钮--><!--一个name对应多个value-->
			请输入爱好：
			<input type="checkbox" name="UserHobby" value="唱" />唱
			<input type="checkbox" name="UserHobby" value="跳" />跳
			<input type="checkbox" name="UserHobby" value="rap" />rap
			<input type="checkbox" name="UserHobby" value="篮球" />篮球
			<input type="checkbox" name="UserHobby" value="看坤" />看坤
		</p>
</body>

  • 效果展示

  • 下拉菜单标签

 语法： <select>...</select>：

HTML中的下拉菜单可以使用<select>元素来创建，内部使用<option>元素表示每个选项。下面是一个基本的例子：

<option>元素常用属性
selected指定该选项默认被选中。
disabled指定该选项不可用，无法选择
label为选项提供一个标签，使其更易于理解
hidden指定该选项不会显示在下拉菜单中，可以在后台使用。
value：用于在提交表单时传递选中的选项值
<p><!--下拉菜单-->
    请选择地址：
    <select name="UserAddSheng">
	    <option value="陕西">陕西</option>
		<option value="山西">山西</option>
		<option value="江苏">江苏</option>
		<option value="安徽">安徽</option>
	</select>&nbsp;&nbsp;省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<select name="UserAdd市">
		<option value="南京">南京</option>
		<option value="无锡" selected>无锡</option>
		<option value="苏州">苏州</option>
		<option value="常州">常州</option>
	</select>&nbsp;&nbsp;市
</p>

  • 效果演示 

多行文本域

在HTML中，可以使用textarea标签来创建多行文本域。

注意：rows和cols属性分别用于指定文本域的行数和列数。根据需要调整这两个属性的值。

<p><!--多行文本域-->
	请输入简介：、
	<textarea name="UserMassage" rows="10" cols="10"></textarea>
</p>

文件域

<!--有文件上传需要添加表单属性，无则不需要添加-->
<input type="file" name="UserPic">

效果演示

 邮箱标签 

  • 效果演示 
<p><!--邮箱标签-->
	请输入邮箱：
	<input type="email" name="UserEmail" />
</p>

网址标签

 三.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="HTML.png" width="250" height="250">
		<form method="get" action="loding.html">
			<p>电子邮箱：<input type="email" name="UserEmail"></p>
			<p>设置密码：<input type="password" name="UserName"></p>
			<p>真实姓名：<input type="text" name="UserName"></p>
			<p>性别：
				<input type="radio" name="UserSex" value="男" checked /> 男
				<input type="radio" name="UserSex" value="女" /> 女
			</p>
			<p>
				生日：
				<select name="UserAddNian">
					<option value="2020">2020</option>
					<option value="2021">2021</option>
					<option value="2022">2022</option>
					<option value="2023">2023</option>
				</select>&nbsp;&nbsp;&nbsp;	年&nbsp;&nbsp;&nbsp;
				<select name="UserAddYue">
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;	
				<select name="UserAddRi">
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
				</select>&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;
			</p>
			<p>为什么要填写我的生日?</p>
			<p>请输入原因：<input type="text" name="UserReseation" ></p>
			<p>
				我现在的身份是:&nbsp;&nbsp;&nbsp;&nbsp;
				<select>
					<option value="请选择身份">请选择身份</option>
					<option value="教师">教师</option>
					<option value="学生">学生</option>
					<option value="其它">其它</option>
				</select>&nbsp;&nbsp;&nbsp;(非常重要)
			</p>
			<p>
				<img src="HTML.png" width="100px" height="50px"/>
				<a href="#">看不清换一张</a>
			</p>
			<p>请输入验证码: <input type="text" name="YanZhengMa"></p>
			<p><input type="image" src="zhuce.png" width="100" height="50"></p>
		</form>	
	</body>
</html>

  • 效果演示  

 四.表单高级应用

 隐藏域属性

 在提交表单时，隐藏域的值会作为表单数据一同发送到服务器。服务器可以通过接收表单数据的方式来获取隐藏域的值，并进行相应的处理。

<p><!--隐藏域-->
	后方内容是隐藏内容：
    <input type="hidden" name="UserSecret" value="1111"/>
</p>

只读属性

<p><!--只读权限-->
     文本框中无法剪辑内容：   
    <input type="text" name="UserSecret" value="1111"/ readonly>
</p>

禁用 属性

在上面的示例中，如果选择了"禁用"选项，则输入字段将被禁用，否则将启用。

<p><!-- disabled:禁用-->
    <input type="reset" value="重置" disabled />
</p>

 表单元素标注 

<label>标签：用于定义输入字段的标签或名称。与相应的表单元素相关联，使得当用户点击标签时，关联的表单元素会聚焦或选中。

<p><!--点击女性自动选择女性选项，无需点击对应框图-->
	请选择性别：
	<input type="radio" name="UserSex" value="男" checked / id="nan"><label for="nan">男</label> 
	<input type="radio" name="UserSex" value="女" id="nv" /><label for="nv">女</label>
</p>

五.表单验证方法

  •  placeholder

该属性值用于设置框图中的提示语 

<p>
	请输入账号：<input type="text" name="UserCode" placeholder="输入账号!!!" />
</p>
  • 效果演示 

  •  required

该属性值用于设置文本框必须填写内容否则无法登录。 

<p>
    请输入密码：<input type="password" name="UserPwd" required/>
</p>

 

pattern 

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单 

<p><!--正则表达式:--><!--^1:以1开头 [358]:3,5,8任选其一 \d{9}:后面内容在0-9之间-->
	请输入手机号：
	<input type="text" name="UserPhoneNum" required pattern="^1[358]\d{9}" />
</p>
  •  效果演示

liu zhi cheng
关注
  • 11
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML---表单
zhoutong2323的博客
12-13 1027
HTML表单是网页上用于收集用户输入信息的一种元素。它由一系列输入字段（input）、选择字段（select）、文本区域（textarea）以及提交按钮（submit）等组成。表单的目的是收集用户的数据并将其发送到服务器进行处理。用户可以在表单中输入文本、选择选项、上传文件等。然后，当用户点击提交按钮时，表单的数据会被发送到定义的处理程序或服务器端脚本进行处理。语法：：定义框图类型，常见的值有text(文本),password(密码),submit(登录)reset(重置) radio(单
html表单<form></form>
06-07
html表单<form action="" > <input name="uid" type="text" value="" maxlength="20"/> <input name="pwd" type="password" value="" maxlength="10"/> <input name="gender" type="radio" value="f"/>nan <input name="gender" type="radio" value="m"/>nv <input name="internest" type="checkbox" value="a" />a <input name="internest" type="checkbox" value="b" />b <input name="internest" type="checkbox" value="c"/>c <br/> <input type="button" value="HH" onclick="alert('!@#$%^&*()_+')"/> <input type="submit" /> <input type="reset"> </form>
HTML表单
weixin_45827423的博客
01-27 418
HTML form表单
Html的表单
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
html表单
huangyh技术栈
08-30 7932
1.1 表单标签作用： 作用：将客户端的数据提交给服务器，（表单是客户与服务器交互的一种方式）。 可见性：在网页上是不可见的。 1.2 form常用的属性： form标签是表单标签的一个根标签。 常用属性 作用 action 提交给服务器的地址 method 提交数据给服务器的方式，主要有两种方式：GET（默认）或POST 1.3 GET与POS...
12-表单标签.html
12-19
12-表单标签.html
ng-alain表单使用方式详解
08-27
模板驱动表单是一种使用HTML模板来构建表单的方式，在ng-alain中，可以使用ngModel来创建表单控件对象及数据模型管理。模板驱动表单以HTML编程风格为主，使用起来相对较简单。在模板驱动表单中，需要使用ngModel来...
html&css; - 表单
10-13
html&css;学习 -表单的源码 包含表单和表单常用属性的讲解
E-mail表单递交
01-20
E-mail表单递交</TITLE></HEAD><BODY > [removed]<!–function validate_form() { validity = true; if (!check_empty(document.form.NAME.value)) { validity = false; alert(‘对不起...
JavaScript案例-js表单验证
02-16
首先，我们需要理解HTML表单的基本结构，包括`<form>`标签、`<input>`元素、`<button>`等。表单的验证通常涉及到`onsubmit`事件，当用户点击提交按钮时，会触发这个事件，此时我们可以插入JavaScript代码进行验证。 ...
前端系列之HTML（表格）
十二指环的博客
01-18 5万+
了解表格应用场景表格基本结构如何操作表格？添加、删除行与列表格属性<caption></caption>定义表格的标题表格跨行跨列表格嵌套案例：表格网页布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格布局</title> </head> <body> <table width="100
HTML中的表单
lhz1315937650的博客
02-22 2325
一、网页中为什么需要表单 表单是为了收集用户信息(与用户进行交互，收集用户资料) 表单就是你在打王者时弹出的实名认证 二、表单的组成 在HTML标签中，一个完整的表单一般由表单域、表单控件(表单元素)和提示信息3个部分组成。 注:接着拿王者荣耀的实名认证举例 表单域是它弹出的整个窗口 表单元素是它可以填信息的小框 提示信息就是每个小框前面提示你填什么信息的文字 1)表单域:包含表单元素的区域(<form>) 在HTML标签中<form>标签用于定义表单域，来实现信
HTML5表单_form
weixin_30631587的博客
09-13 300
原则：能让用户选择的决不填写，增加用户体验 表单（form）元素格式 <input type="text" name="fname" value="text"/> input元素类型 input元素名称 input元素的值 表单语法 属性 说明 type 指定元素的类型。text、password、checkbox...
HTML表单示例
Useless_csdn的博客
01-11 3114
表单是HTML页面中负责数据采集功能的部件。它往往由三部分组成，即表单标签、表单域、表单按钮。 表单标签：用于表面表单的范围，位于表单标签中的元素将被提交 语法：&lt;form&gt;&lt;form&gt; 属性：Method,Enctype,action 表单域：包括文本框，密码框等多种类型 语法：&lt;input……/&gt; 属性：type,name,value 种类：文...
做一个简单的HTML表单讲解吧
Tcontinuous的博客
05-09 5561
项目八表单............................................................................................................. 1学习目标：..................................................................................
HTML-表单（非常详细）
热门推荐
南劲竹的博客
08-31 7万+
  表单语法 &lt;form method="post"（规定如何发送表单数据 常用值：get|post） action="result.html"&gt;（表示向何处发送表单数据） &lt;p&gt; 名字：&lt;input name="name" type="text" &gt; &lt;/p&gt; &lt;p&
html表单整理，实例
chen983234416的博客
11-16 1万+
    首先通过一个实例来表明表单的一些基本的使用，然后详细讲解表单里面的属性，最后再做出总结。   接下来解析上面的例子  1、表单的作用：用来搜集不同类型的用户输入 2、&lt;form action="#" method="get"&gt; &lt;/form&gt; : form标签表示表单。action="#"：设置数据的提交地址，就是提交给 哪一个页面。method="get...
好看的手机html-form表单
最新发布
06-07
好看的手机html-form表单应该是具有良好的美学设计，符合人类视觉习惯和用户体验设计原则的表单。其中，要素包括以下几个方面。 首先是整体布局和排版，尽量采用简洁明了的排版设计，避免过多繁琐细节和复杂的布局。市面上的好看的手机html-form表单都具有较宽的间距、明确的分组和分块设计，遵循内容呈现的递进式原则，为用户提供观感清晰和易读易懂的页面。 其次是色彩搭配和配色方案。好看的手机html-form表单应该尽可能减少花哨的色彩和图案，避免过多的干扰和视觉误导。同时，要选取符合用户群体和品牌特征的色域，例如蓝色和绿色多被用于提供信任和安全感，如银行、金融等领域经常采用这类色环，而橙色和红色则赋予表单鲜明、突出的属性。 再者，是字体和文字排版。好看的手机html-form表单应该选用用户易读的字体，例如Arial、微软雅黑等多被用于手机网页、内嵌框架和APP应用。同时要注意文字大小和行间距的搭配，避免文字过多或过小而显得拥挤和不专业。 最后，是交互设计和较好的响应式布局。好看的手机html-form表单应该兼顾不同分辨率的设备，尽量在PC、平板和移动端多角度测试，保证更好的用户体验和较短的响应时间。同时要适度增加视觉焦点和交互式效果，例如hover、点击、折叠等方式，在交互过程中引导用户填写，同时保证表单提交的流畅，提高数据管理、信息统计的效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值