前端学习笔记(HTML)——表单

最新推荐文章于 2022-09-26 21:38:01 发布
最新推荐文章于 2022-09-26 21:38:01 发布
阅读量168 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43676025/article/details/88374975
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<!--表单用于采集页面上的用户信息，实现用户和后台服务器之间的交互 
	创建一个表单：1、表单标签:通过相关属性来规定表单的提交情况
				 2、表单域:用户的输入信息
				 3、表单按钮：提交按钮、取消按钮、普通标签
	-->
	<form action="#" method="post">
		<!-- action属性，代表表单提交的后台处理程序的url地址 
			 method属性，代表提交方式，常用的提交的方式两种post和get
		-->
	<!-- 表单域 -->
	<!-- 文本框:type->类型
				name->名称
				placeholder->占位符			
	-->
	文本框：<input type="text" name="txt" placeholder="输入文本"><br>
	<!-- 密码框 -->
	密码框：<input type="password" name="ps" placeholder="输入密码"><br>
	<!-- 单选按钮 
		 同一组单选按钮的name属性要设置一致
	-->
	性别：<input type="radio" name="sex" checked="chcked" value="male">男
		 <input type="radio" name="sex" value="female">女<br>
	国籍：<input type="radio" name="country" checked="chcked" value="china">中国
		  <input type="radio" name="country" value="foreign">外国<br>
	<!-- 【注意】
		1、像输入框、密码框等可以直接输入内容的表单域，我们可以不用设置value属性，输入的内容会在提交时生成value,像单选按钮无法输入内容，只能设置value，当我们选中某个按钮时，按钮就会把value提供给组表单
		2、对于输入框、密码框，没有输入内容，可以设置占位符
	 -->
	 <!-- 复选框 -->
	<br>
	  	爱好：<input type="checkbox" name="hobby" value="listen">听歌
	  	  	<input type="checkbox" name="hobby" value="lol">LOL
	  	  	<input type="checkbox" name="hobby" value="eat">吃鸡
	  	  	<input type="checkbox" name="hobby" value="palyball">打球
	  	  	<input type="checkbox" name="hobby" value="travel">旅行
	<!-- 下拉列表： -->
	<br>
	  	请选择你喜欢的类型：
	  	<select name="love">
	  	 	<option value="bigWave">大波浪</option>
	  	  	<option value="xizhi">锡纸烫</option>
	  	  	<option value="guang">光头</option>
	  	  	<option value="zhongfen">大中分</option>
	  	 </select>
	<br>
    <!-- 文件选择框 -->
	  	请选择文件<input type="file" name="file">
	<!-- 隐藏域:隐藏一些不希望别人能够直接看到的内容-->
	<input type="hidden" name="id">
	<br>
	<!-- 表单按钮 -->
	<!-- 提交按钮：用于将表单中的内容以method中指定的方式提交给action后台处理程序，提交的数据格式：name=value&... 例如：本表单中提交,txt="qwer"&ps="123"&sex="male"&country="china"... -->
	<input type="submit" value="提交">
	<!-- 取消/重置按钮：将输入的内容清空 -->
	<input type="reset" value="重置">
	<!-- 普通按钮：可以按 -->
	<input type="button" name="" id="">
	</form>
</body>
</html>
网页显示如下表单
大佬橙1215
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端学习笔记——表单
weixin_46493903的博客
08-01 1646
表单是用来收集用户输入信息的 一、表单的组成 一个完整的表单通常由表单域、提示信息、表单控件（表单元素）3个部分组成 表单域：相当于一个容器，容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域， 表单中的数据就无法传送到后台服务器。 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 表单域 标签：form，双标
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 804
前端第一部分：Vue（Ⅰ）
前端-html表单
董盛姣
01-18 442
表单是啥？           form是一个表单，是为了收集数据的、是一个看不到的东西。需要提交的数据必须放到表单中，这样才能一一对文本内容进行校验。         表单两个属性              action :提交到服务器的位置 或是路径   action="#" 表示当前页面              method：提交方式有7种，但是常用的为两种 get和p
html前端表单笔记
卑微人的博客
02-08 436
需求： 分析： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
HTML（十）表单内容
Oliver尹的博客
06-18 390
表单这部分是网页上的一个重点，实际应用中有很多地方都用到了表单，下面大概介绍以下表单的流程，具体请看下一章节； 表单的使用过程大致有：构建表单-》配置表单-》验证表单-》服务器处理   构建表单 所有的表单都是from组成的（注意，按钮只可以是button） &lt;form&gt;     &lt;div&gt;&lt;label&gt;姓名:&lt;input&gt;&lt;/la...
高阶前端框架开发(学习笔记)
jjsnc
06-04 520
高阶函数 function Vue(state) { // 用 Vue.js 编写前端页面 } function React(state) { // 用 React.js 编写前端页面 } function frontend(state, method) { // 框架无关的方法和思想 } frontEnd(data, Vue); frontEnd(data, React)...
Web前端——HTML表单及表格
qq_25592087的博客
09-26 1541
3、form的属性：（1）action：放置后台地址 （2）method：请求方式 get post。代表表头 代表行 代表表头中的列。 元素在 元素中使用，用来声明允许用户输入数据的 input 控件。代表表身体 代表行 代表表身体中的列。label标签中for属性的属性值和表单中的id属性值保持一致。1、在html中，通常把form标签称为表单。
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
前端学习笔记——Ajax
lxy95512的博客
03-10 1329
URL地址 URL地址的概念 URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。 URL地址的组成部分 URL地址一般由三部组成: ①客户端与服务器之间的通信协议 ②存有该资源的服务器名称 ③资源在服务器上具体的存放位置 客户端与服务器的通信过程 客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤。 如果要在网页中请
HTML学习笔记4——常用标签
lxy95512的博客
01-11 376
标题标签<h1>-<h6> 为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTMI 提供了6个等级的网页标题，即<h1>-——<h6> <h1>我是一级标题</h1>单词head的缩写,意为头部、标题。 标签语义:作为标题使用,并且依据重要性递减。 特点: 1.加了标题的文字会变的加粗,字号也会依次变大。 2. 一个标题独占一行。 <h1>标题标签</h1> &lt...
web前端学习笔记（四）——表单
齐在的专栏
08-29 5778
HTML表单结构 定义：表单是手机用户数据信息的各种表单元素的集合区域。 作用：实现网页上的数据交互，手机客户端输入的数据信息，提交到网站服务器端进行处理。 最常见的应用：1. 注册/登录 2. 搜索 3. 留言/评论 4. 文件上传/文章编辑 结构：表单区域+表单控件（表单元素） 表单标签：&lt;forem&gt;   双标签，块状元素。用来定义网页中的交互输入的区域（表单区）。所有...
前端系列之HTML（表单）
十二指环的博客
01-18 4068
一.表单基本结构表单应用场景常用表单元素使用下拉菜单和列表标签表单交互属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础表单</title> </head> <body> <form action="action.php" target="_blank"> <h1 align="
html前端开发-----表单form
m0_51272779的博客
04-22 705
html前端开发-----表单form 基础案例 0基础入门
html 表格表单
m4587的博客
07-15 1183
inputtype="checkbox"name="hobby"value="zq"/>足球篮球羽毛球。乒乓球。
HTML表单
前端小白的成长之路
05-29 2027
基本标签 HTML 表单用于搜集不同类型的用户输入 总结： 定义标签<form> 输入标签<input>，类型有：text;radio;submit 举例： 1.text： <input type="text" name="firstname">name只是为该文本框起了个名字 2.radio <input type="radio" name="sex" value="male" checked>Male valued为赋值
html前端如何将一个页面表单内的数据全部传递到另一个页面？
热门推荐
stone_tomcate的博客
03-20 7万+
1    在你的页面的中的form标签中有个一个action 属性， 你可以给它指定某个页面，那个页面就是你对数据处理的页面 2 你的要求涉及到跨域访问,跨域访问严格上来说是不安全所以被禁止的.但是JSONP可以绕过这些设定达到交换数据的目的. 　　总而言之,序列化你要提交的表单内的数据,然后用JSONP送出去. 3 说到
中国石油大学(北京)克拉玛依校区在广东2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
浙江越秀外国语学院在广东2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
网站模板源代码（组件划分规范，二改省力）
最新发布
09-08
组件划分规范，二改省力！！！
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、付费专栏及课程。

余额充值