Night小课堂04 HTML表单

已于 2023-05-11 16:05:42 修改
阅读量82 收藏
点赞数 1
文章标签： html5 前端 html
于 2023-05-11 16:04:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NoNight_Zzz/article/details/130621687
版权

上一篇文章讲了HTML中的列表和表格，这篇文章主要讲关于HTML中表单的内容

表单定义：多个输入框及按钮以表格的形式展示

表单应用场景：表单常用于制作网页中登录注册功能

表单代码结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单代码结构</title>
	</head>
	<body>
		<form>
			<table border="1px solid black">
				<tr><td colspan="2">登录页面</td>
				</tr>
				<tr><td>用户名</td>
					<td><input type="text"/></td>
				</tr>
				<tr><td>密码</td>
					<td><input type="password"/></td>
				</tr>
				<tr><td colspan="2"><input type="submit" value="提交"/>
					<input type="reset" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

效果图：

表单元素属性：<input type="xx" value="xx" name="xx" />

1.type:指定当前元素的类型

2.value:所见即所得，默认初始化可看到的

3.name:提交到后端服务器的值的key

表单常见应用：

1.文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本框</title>
	</head>
	<body>
		<form>
			文本框：<input type="text" value="初始值"/>
		</form>
	</body>
</html>

效果图：

特点1：type="text"  用户输入的值在页面中明文显示    特点2：value="xx"     文本框中默认的值

2.密码框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>密码框</title>
	</head>
	<body>
		<form>
			密码框：<input type="password" value=""/>
		</form>
	</body>
</html>

效果图：

特点1：type="password" 用户输入的值在页面中暗文显示

3.单选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单选按钮</title>
	</head>
	<body>
		<form>
			男：<input type="radio" name="sex" value="1" checked="checked"/>
			女：<input type="radio" name="sex" value="0"/>	
		</form>
	</body>
</html>

效果图：

特点1：type="radio"  代表是单选按钮

特点2：name="xx"    代表两个单选按钮如果保持一致的话，代表是单选，否则为多选

特点3：value="xx"    代表发送到后端服务器中的值，而不是展示，前端页面是看不见的

特点4：checked       代表初始化页面的时候默认勾选某个单选框，等价于checked="checked"  

4.多选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多选按钮</title>
	</head>
	<body>
		<form>
			香蕉：<input type="checkbox" name="fruit" value="0" checked="checked" />
			苹果：<input type="checkbox" name="fruit" value="1" />
			橘子：<input type="checkbox" name="fruit" value="2" />
		</form>
	</body>
</html>

效果图：

特点1：type="checkbox"  代表是多选按钮

特点2：name="fruit"        注意点：多个多选框按钮需要保持name的值保持一致

特点3：value="xx"          代表发送到后端服务器中的值，而不是展示

特点4：checked            代表初始化页面的时候默认勾选某个单选框，等价于checked="checked"  

4.列表框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表框</title>
	</head>
	<body>
		<select>
			<option value="0">星期天</option>
			<option value="1">星期一</option>
			<option value="2">星期二</option>
			<option value="3">星期三</option>
			<option value="4">星期四</option>
			<option value="5">星期五</option>
			<option value="6">星期六</option>
		</select>
	</body>
</html>

效果图：

特点1：select 是列表框中表的标签名

特点2：option 是列表框中列的标签名

特点3：select和option 是一对组合，不可分离

特点4：value 存放的值是用来发送到服务器后端的，不是用来展示的

特点5：option 之间的文本值是用来展示的

5.按钮

按钮常用的分为三种 reset submit button

reset：重置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>重置</title>
	</head>
	<body>
		<form>
			用户名：<input type="text" /><br />
			<input type="reset" value="重置" />	
		</form>
	</body>
</html>

效果图：

 submit：提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提交</title>
	</head>
	<body>
		<form action="index.html">
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

效果：点击提交，实现页面跳转（跳到action中写的页面）

特点1：form中action存放了index.html页面的全路径

特点2：type="submit"触发了当前表单，并跳转到action中的页面

button：普通按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>普通按钮</title>
	</head>
	<body>
		<form>
			<input type="button" value="登录" />
		</form>
	</body>
</html>

效果图：

value中写什么就显示什么按钮，上图虽然是登录键，但是却没有登录功能，只是一个普通按钮

6.多行文本域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多行文本域</title>
	</head>
	<body>
		<form>
			<textarea></textarea>
		</form>
	</body>
</html>

效果图：

7.文件域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文件域</title>
	</head>
	<body>
		<form>
			<input type="file" formenctype="multipart/form-data"/>
			<input type="submit" value="上传" />
		</form>
	</body>
</html>

效果图：

8.邮件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>邮件</title>
	</head>
	<body>

		<form action="index02.html">
			<table border="1px">
			<tr>
				<td>请输入邮箱地址：</td>
				<td><input type="email" required="required"/></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit"  value="提交"/></td>
			</tr>
			</table>
		</form>
	</body>
</html>

效果图：

特点1：type="email"代表如果用户输入邮箱的地址不符合邮箱地址的规范，会导致当用户触发submit按钮之后，无法转发到action中的html页面，并提示警告

9.网址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网址</title>
	</head>
	<body>
		<form action="index02.html">
			请输入你的网址：<input type="url" required="required"/><br />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

效果图：

特点1：type="url"代表提交表单后，网址必须符合规范，否则会提示“请输入网址”

10.数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数字</title>
	</head>
	<body>
		<form>
			<input type="number" step="2" max="10" min="1"/>
		</form>
	</body>
</html>

效果图：

特点1：type="number"代表的含义是展示可以限制用户输入数值范围的标签类型

特点2：min代表范围的最小值

特点3：max代表范围的最大值

特点4：step代表用户每一次选择数值之间的步长（step=2 点一次就是0+2）

11.滑块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑块</title>
	</head>
	<body>
		<form>
			<input type="range" min="0" max="10" step="3"/>
		</form>
	</body>
</html>

效果图：

12.搜索框：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索框</title>
	</head>
	<body>
		<form>
		搜索框：<input type="search" /><br />
		文本框：<input type="text" />
		</form>
	</body>
</html>

效果图：

特点1：type="search"代表的含义是 带有删除按钮的搜索框（删除按钮在搜索框之内）

以上是表单常见应用

表单的高级应用：

1.隐藏域：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隐藏域</title>
	</head>
	<body>
		<form>
			<table border="1px">
				<tr>
					<th colspan="3">管理后台查询页面</th>
				</tr>
				<tr>
					<input type="hidden" value="1000" name="id"/>
					<td>用户名</td>
					<td>体重</td>
					<td>身高</td>
				</tr>
				<tr>
					<input type="hidden" value="1001" name="id"/>
					<td>小A</td>
					<td>120</td>
					<td>170</td>
				</tr>
				<tr>
					<input type="hidden" value="1002" name="id"/>
					<td>小B</td>
					<td>130</td>
					<td>185</td>
				</tr>
		</form>
	</body>
</html>

效果图：

特点1：type="hidden"代表当前记录不需要展现在当前行上，但是需要隐藏起来并发送给后端服务器

2.只读和禁用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>只读和禁用</title>
	</head>
	<body>
		<form>
			<input type="text" value="123"/>
			<input type="text" value="123" readonly="readonly"/>
			<input type="text" value="123" disabled="disabled"/>
		</form>
	</body>
</html>

效果图：

特点1：readonly代表不可编辑

特点2：disabled代表置灰效果且不可编辑

3.表单元素的标注：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单元素的标注</title>
	</head>
	<body>
		<form>
			<label for="male">男：</label><input type="radio" name="sex" value="0" id="male"/><br />
			<label for="female">女：</label><input type="radio" name="sex" value="1" id="female"/><br />
		</form>
	</body>
</html>

效果图：

作用：优化用户体验，尤其是让手机端的用户不用点选项，点字附近也能选择成功

特点1：在input标签中加入id="xx"

特点2：在label标签中加入for="xx"

表单的初级验证：

1.表单的初级验证缘由 ： 1）减轻服务器压力 2）安全性

2.表单的初级验证元素标签: 1）placeholder 2）required

3.placeholder:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>placeholder</title>
	</head>
	<body>
		<form>
			单纯的search：<input type="search" /><br/>
			加入value默认值：<input type="search" value="请输入关键词"/><br/>
			搜索：<input type="search" placeholder="请输入关键词" /><br/>
		</form>
	</body>
</html>

效果图：

特点1：input类型的文本框提供一种提示

特点2：可以描述文本框期待用户输入何种内容

特点3：提示语默认显示，当文本框中输入内容时提示语消失

特点4：适合于input标签：text、search、url、email和password等类型

4.required：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>required</title>
	</head>
	<body>
		<form action="index.html">
			用户名：<input type="text" required="required"/><br />
			<input type="submit" value="提交" /><br />
		</form>
	</body>
</html>

效果图：

特点1：规定文本框填写内容不能为空，否则不允许用户提交表单

特点2：适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

下期预告：下一篇文章将介绍关于CSS的知识

本人才疏学浅，文中如有出现错误请多多谅解

Night-Zzz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JQuery课堂学习笔记
小牛itbull的博客
11-01 689
第1课 JQuery技术简介 page language="java" import="java.util.*" pageEncoding="utf-8"%> <%     String path = request.getContextPath();     String base
Night-Mode
03-16
Night-Mode
吾爱破解培训第一课作业密码_如何实现您的第一个无密码登录系统
07-09 2836
吾爱破解培训第一课作业密码You may have heard that there are 360 Million Reasons to Destroy All Passwords and that Passwords are Obsolete. But that doesn’t really help you actually make a passwordless authenticatio...
自学CSS
weixin_46376311的博客
03-27 216
CSS，主讲：hector 一、CSS简介 1.什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2.为什么使用CSS 实现内容于样式是分离，便于团队开发 样式复用，便与网站是后期维护‘ 页面是精确控制，让页面更精美 3.CSS作用 页面外观美化 布局和定位 二、基本用法 1.CSS用法 1 <h...
CSS入门笔记
chaolei1的博客
03-27 194
一、CSS简介 1.什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置规则，用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 - 页面的精确控制，让页面更精美 3.CSS作用 页面外观美化 布局和定位 二、基本用法 1.CSS语法 <head> <style&g...
night_writer
03-09
night_writer
saturday-night
03-07
周六晚上
NIGHT-PHISING
03-05
夜行
vscode-monokai-night:完整，黑暗和简约的Monokai风格主题
05-04
ext install fabiospampinato.vscode-monokai-night 用法 运行“ Preferences: Color Theme命令。 选择Monokai Night 演示版 相关主题 以下应用程序也有一些非官方的Monokai Night风格的主题： 贡献 如果您发现问题...
HTML5表单元素：重塑数据收集的艺术
艾恩小灰灰的博客
06-08 440
HTML5表单元素和属性的引入，不仅简化了前端开发者的代码，更重要的是，它们为用户提供了更加友好和直观的交互体验。从自动验证到动态反馈，从自动完成到无障碍支持，HTML5表单功能的提升为现代Web应用设计奠定了坚实的基础。作为开发者，掌握并有效利用这些特性，将大大提升表单的数据收集效率和用户满意度。随着Web技术的不断发展，探索和实践这些新特性，将使我们的网页应用更加先进和富有竞争力。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 536
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 375
在vue.config.js中配置关闭Uncaught runtime errors显示。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 261
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 347
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
最新发布
lyd的博客
06-15 219
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 279
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
vue基础P7-17
weixin_43883584的博客
06-09 584
{{xxxx}}用在标签体中，也就是<>{{xxx}}</>xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1257
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
scene_night
09-07
根据引用中提到的情景模式，"SCENE_MODE_NIGHT"是相机支持的夜景模式。根据引用中的描述，当相机设置为"USE_SCENE_MODE"时，必须使用"ANDROID_CONTROL_SCENE_MODE"来确定3A算法的行为。对于"SCENE_MODE_NIGHT"，HAL...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值