HTML笔记——表单

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量113 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44030304/article/details/107401837
版权
  1. 表单用于将本地的数据提交给远程的服务器
  2. form标签用来创建一个表单，在form标签中必须指定一个action属性，该属性指向的是表单要提交的服务器地址
  3. text文本框
    (1). 使用input来创建一个文本框，它的type属性是text
    (2). 如果希望表单项中的数据提交到服务器中，还必须给表单项指定一个name属性，name表示提交内容的名字
    (3). 用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器：url地址?查询字符串
    (4). 格式：属性名=属性值&属性名=属性值
    (5). 在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
  4. radio单选按钮
    (1). 使用input来创建一个单选按钮，它的type属性值是radio
    (2). 单选按钮通过name属性进行分组，name属性相同的是一组按钮
    (3). 像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
    (4). 如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked="checked"属性
  5. select下拉列表
    (1). 使用select来创建一个下拉列表
    (2). 在下拉列表中使用option标签来创建一个一个列表项
    (3). 下拉列表的name属性需要指定给select，而value属性需要指定给option
    (4). 可以通过在option中添加selected="selected"来将选项设置为默认选中
    (5), 当为select添加一个multiple=“multiple”，则下拉列表变为一个多选的下拉列表
    (6). 在select中可以使用optgroup对选项进行分组,同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字
  6. submit提交按钮
    (1). 提交按钮可以将表单中的信息提交给服务器
    (2). 使用input创建一个提交按钮，它的type属性值是submit
    (3). 在提交按钮中可以通过value属性来指定按钮上的文字
  7. 属性
    (1). autocomplete=“off” 关闭自动补全
    (2). readonly：将表单项设置为只读，数据会提交
    (3). disabled：将表单设置为禁用，数据不会提交
    (4). autofocus：设置表单项自动获取焦点
<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>网页标题</title>
	</head>
	<body>
	<form action="target.html">
<!-- 在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中 -->
		<fieldset>
<!-- 在fieldset中可以使用legend子标签，来指定组名 -->
			<legend>用户信息</legend>
<!-- label标签专门用来选中表单中的提示文字，该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值 -->
			<label for="um">用户名</label>
			<input id="um" type="text" name="username" />
<!-- 使用input创建一个密码框，它的type属性值是password -->
			密码<input type="password" name="password" />
			性别<input type="radio" name="gender" value="male"  />男
			<input type="radio" name="gender" value="female" />女
		</fieldset>
		<fieldset>
			<legend>用户爱好</legend>
<!-- 使用input创建一个多选框，它的type属性值是checkbox -->
			爱好<input type="checkbox" name="hobby" value="zq" />足球
			<input type="checkbox" name="hobby" value="lq" />篮球
			<input type="checkbox" name="hobby" value="pq" />排球
			你喜欢的明星
			<select name="star"  multiple="multiple">
				<optgroup label="女明星">
					<option value="zq">周迅</option>
					<option value="zzy" selected="selected">章子怡</option>
				</optgroup>
				<optgroup label="男明星">
					<option value="wk">王凯</option>
					<option value="hg" selected="selected">胡歌</option>
				</optgroup>
			</select>
		</fieldset>
<!-- 使用textarea创建一个文本域 -->
			自我介绍<textarea name="info"></textarea>
			<input type="submit"  value="注册"/>
<!-- reset重置按钮，点击重置按钮以后表单中的内容将会恢复为默认值 -->
			<input type="reset" value="重置"/>
<!-- button：可以用来创建一个单纯的按钮，这个按钮没有任何功能，只能被点击 -->
			<input type="button"  value="按钮"  />
<!-- 除了使用input，也可以使用button标签来创建按钮，这种方式和使用input类似，只不过由于它是成对出现的标签，使用起来更加的灵活 -->
			<button type="submit">提交</button>
			<button type="reset">重置</button>
			<button type="button">按钮</button>
		</form>
	</body>
</html>

在这里插入图片描述

绮逾依
关注
web前端学习笔记——表单
weixin_46493903的博客
08-01 1667
表单是用来收集用户输入信息的 一、表单的组成 一个完整的表单通常由表单域、提示信息、表单控件（表单元素）3个部分组成 表单域：相当于一个容器，容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域， 表单中的数据就无法传送到后台服务器。 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 表单域 标签：form，双标
HTML笔记 —— 表单
m0_63102464的博客
10-29 1949
表单学习 注册 名字: 密码: 性别: 男 女 爱好: 睡觉 聊天 敲代码 打游戏 按钮 国家: 中国 美国 日本 俄罗斯 反馈: 文本内容 选择文件: 邮箱: url 数字: 滑块: 搜索: 你点我试试 []( )表单验证 []( )placeholder，用于输入框 []( )required非空判断 []( )pattern传入正则表达式 注意这里的正则表达式...
HTML笔记 —— 表单，微信web开发者
2401_84170337的博客
04-07 732
这个名称可以让我们对这个控件进行操作，比如锚链接里面，就可以通过一个控件的名称，跳转到该控件所在的位置（1）type等于button、reset、submit时，value是显示在按钮上的文本内容（2）type等于text、password、hidden时，value是默认显示的初始值（3）type等于checkbox、radio、image时，value是与输入相关联的值。
HTML基础笔记——表单
KllKllKll
07-18 1288
如果想要做出一个动态页面，我们就需要借助表单来实现 在HTML中，表单标签有五种：form、input、textarea、select、option 根据外观进行划分，表单可以分为以下八种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表 创建一个表单，与创建一个表格类似，我们也必须要把所有表单标签放在form标签内部 <form> 各种表单标签 </form> form标签属性 属性 说明 name 表单名称 m
HTML学习笔记——表单
菜鸟的编程之路
09-01 829
9.1 表单标记form 在网页中< form>< /form>标记对用来创建一个表单，即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。在表单的标记中，可以设置表单的基本属性，包括表单的名称、处理程序和传送方法等。一般情况下，表单的处理程序action和传送方法method是比不可少的参数。 9.1.1 提交表单action、表单名称name、传送方法met...
HTML学习笔记——08：表单＜form＞
qq_31532983的博客
02-20 471
表单标签
H5学习笔记2——表单
wy2015_wy2015的博客
09-09 983
list 属性引用 元素中包含的预定义选项。
Web应用开发学习笔记————html表单标签
2301_77606661的博客
05-05 335
实现代码： 实现效果：
HTML5学习笔记3——表单
qq_45569406的博客
07-26 156
HTML5学习笔记3——表单
HTML学习笔记——表单标签上
Barry Jim的博客
08-29 755
表单标签 目录 简介 格式 Input标签 Label标签 Datalist标签 Select标签 Textarea标签 综合练习 注意点 简介 什么是表单？ 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签，表单域，表单按钮。 什么是表单元素？ HTML中标签/标记/元素都是指HTML中的标签 表单元素其实就是HTML中的一些标签，在浏览器中所有的表...
HTML学习笔记（五）——表单
01-08
HTML中的表单是网页设计中不可或缺的部分，它们用于收集用户数据，实现用户与网页的交互。表单在诸如用户注册、在线购物、联系方式提交等多种场景中广泛应用。HTML5对传统表单进行了重大改进，提供了更丰富的功能和...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
HTML 与 ES6 是前端开发的两大核心技术
qq_25416827的博客
10-02 818
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
复习HTML(基础）
m0_74124657的博客
10-01 1094
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 848
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1126
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 297
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 734
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 968
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
java 上传文件_JAVA学习笔记——fileUpload文件上传
05-17
文件上传是Web开发中常见的功能之一，Java中也提供了多种方式来实现文件上传。其中，一种常用的方式是通过Apache的commons-fileupload组件来实现文件上传。 以下是实现文件上传的步骤： 1.在pom.xml文件中添加以下依赖： ```xml <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> ``` 2.在前端页面中添加文件上传表单： ```html <form method="post" enctype="multipart/form-data" action="upload"> <input type="file" name="file"> <input type="submit" value="Upload"> </form> ``` 3.在后台Java代码中处理上传文件： ```java // 创建一个DiskFileItemFactory对象，用于解析上传的文件 DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置缓冲区大小，如果上传的文件大于缓冲区大小，则先将文件保存到临时文件中，再进行处理 factory.setSizeThreshold(1024 * 1024); // 创建一个ServletFileUpload对象，用于解析上传的文件 ServletFileUpload upload = new ServletFileUpload(factory); // 设置上传文件的大小限制，这里设置为10MB upload.setFileSizeMax(10 * 1024 * 1024); // 解析上传的文件，得到一个FileItem的List集合 List<FileItem> items = upload.parseRequest(request); // 遍历FileItem的List集合，处理上传的文件 for (FileItem item : items) { // 判断当前FileItem是否为上传的文件 if (!item.isFormField()) { // 获取上传文件的文件名 String fileName = item.getName(); // 创建一个File对象，用于保存上传的文件 File file = new File("D:/uploads/" + fileName); // 将上传的文件保存到指定的目录中 item.write(file); } } ``` 以上代码中，首先创建了一个DiskFileItemFactory对象，用于解析上传的文件。然后设置了缓冲区大小和上传文件的大小限制。接着创建一个ServletFileUpload对象，用于解析上传的文件。最后遍历FileItem的List集合，判断当前FileItem是否为上传的文件，如果是，则获取文件名，创建一个File对象，将上传的文件保存到指定的目录中。 4.文件上传完成后，可以给用户一个提示信息，例如： ```java response.getWriter().write("File uploaded successfully!"); ``` 以上就是使用Apache的commons-fileupload组件实现文件上传的步骤。需要注意的是，文件上传可能会带来安全隐患，因此在处理上传的文件时，需要进行严格的校验和过滤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值