编程笔记 html5cssjs 022 HTML表单概要
编程笔记 html5&css&js 022 HTML表单概要
- 一、<form> 元素
- 二、HTML Form 属性
- 三、操作
- 小结
网页光是输出没有输入可不行，因为输出还是比输入容易，所有就先接触输出，后学习输入。html用来输入的东西叫“表单”。
HTML 表单用于搜集不同类型的用户输入。
一、 元素
HTML 表单用于收集用户输入。
元素定义 HTML 表单：<form>.
form elements.
</form>
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
这是使用的类型：
类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）
文本输入
<input type="text"> 定义用于文本输入的单行输入字段：
<form>First name:<br>
<input type="text" name="firstname">
<br>Last name:<br>
<input type="text" name="lastname">
</form>
注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
单选按钮输入
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：
<form action="action.js">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
<form action="">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>
二、HTML Form 属性
HTML <form> 元素，已设置所有可能的属性，是这样的：
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>
下面是 <form> 属性的列表：
属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
三、操作
<!DOCTYPE html>
<html lang="zh-cn"><head><title>编程笔记 html5&css&js html表单</title><meta charset="utf-8" /><style>body {color: cyan;background-color: teal;}form {/* 居中表单 */margin: 0 auto;/* 显示表单的轮廓 */padding: 1em;border: 1px solid #ccc;border-radius: 1em;width: 300px;}</style></head><body><h1 align="center">编程笔记 html5&css&js html表单</h1><form id="myForm"><ul><li><label for="name">姓名:</label><input type="text" id="name" name="user_name" /></li><li><label for="email">邮箱:</label><input type="email" id="email" name="user_email" /></li><li><label for="interests">兴趣:</label><br /><label for="interest1">运动</label><inputtype="checkbox"id="interest1"name="interest"value="运动"/><br /><label for="interest2">音乐</label><inputtype="checkbox"id="interest2"name="interest"value="音乐"/><br /><label for="interest3">旅游</label><inputtype="checkbox"id="interest3"name="interest"value="旅游"/><br /><br /></li><li><label for="msg">补充:</label><textarea id="msg" name="user_message"></textarea></li></ul><div class="button"><inputalign="center"type="button"value="提交"onclick="showDialog()"/></div></form><div align="center" id="rs"></div><script>function showDialog() {var name = document.getElementById("name").value;var email = document.getElementById("email").value;var interests = [];var checkboxes = document.getElementsByName("interest");var msg = document.getElementById("msg").value;for (var i = 0; i < checkboxes.length; i++) {if (checkboxes[i].checked) {interests.push(checkboxes[i].value);}}var result ="姓名: " +name +"\n邮件地址: " +email +"\n兴趣: " +interests.join(", ") +"\n补充：" +msg;alert(result);document.getElementById("rs").innerHTML(result);}</script></body>
</html>
小结
混个脸熟吧，先。后面慢慢就真熟了，熟练。
相关文章：
编程笔记 html5cssjs 022 HTML表单概要
编程笔记 html5&css&js 022 HTML表单概要 一、<form> 元素二、HTML Form 属性三、操作小结 网页光是输出没有输入可不行，因为输出还是比输入容易，所有就先接触输出，后学习输入。html用来输入的东西叫“表单”。 HTML 表单用于搜…...
三子棋（c语言）
前言： 三子棋是一种民间传统游戏，又叫九宫棋、圈圈叉叉棋、一条龙、井字棋等。游戏规则是双方对战，双方依次在9宫格棋盘上摆放棋子，率先将自己的三个棋子走成一条线就视为胜利。但因棋盘太小，三子棋在很多时候会出现和…...
MySQL-DCL
DCL是数据控制语言，用来管理数据库用户，控制数据库的访问权限。 管理用户：管理哪些用户可以访问哪些数据库 1.查询用户 USE mysql; SELECT * FROM user; 注意： MySQL中用户信息和用户的权限信息都是记录在mysql数据库的user表中的…...
QT开源类库集合
QT开源类库集合 一、自定义控件 QSintQicsTableLongscroll-qtAdvanced Docking System 二、图表控件 QwtQCustomPlotJKQTPlotter 三、网络 QHttpEngineHTTP 四、 音视频 vlc-qt 五、多线程 tasks 六、数据库 EasyQtSql 一、自定义控件 1. QSint 源代码地址：QSint&…...
)
C++ STL（2）--算法(2)
算法(2)----STL里的排序函数。 1. sort: 对容器或普通数组中指定范围内的元素进行排序，默认进行升序排序。 sort函数是基于快速排序实现的，属于不稳定排序。 只支持3种容器：array、vector、deque。 如果容器中存储的是自定义的对象ÿ…...
格密码基础：对偶格（超全面）
目录 一. 对偶格的格点 1.1 基本定义 1.2 对偶格的例子 1.3 对偶格的图形理解 二. 对偶格的格基 2.1 基本定义 2.2 对偶格的格基证明 三. 对偶格的行列式 3.1 满秩格 3.2 非满秩格 四. 重复对偶格 五. 对偶格的转移定理（transference theoremÿ…...
ECMAScript简介及特性
ECMAScript是一种由ECMA国际（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范，JavaScript在它基础上进行了自己的封装。ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。 ECMAScript的…...
csdn中的资源文件如何删除？
csdn中的资源文件如何删除？ 然后写文章的时候 点击资源绑定，解锁资源，就可以再次上传。...
NA原理及配置
在IP地址空间中，a；b；c类地址中各有一部分地址，被称为私有IP地址（私网地址），其余的为公有IP地址（公网地址） A：10.0.0.0 - 10.255.255.255 --- 相当于1条A类网段…...
解决：TypeError: ‘tuple’ object does not support item assignment
解决：TypeError: ‘tuple’ object does not support item assignment 文章目录 解决：TypeError: tuple object does not support item assignment背景报错问题报错翻译报错位置代码报错原因解决方法方法一：方法二：今天的分享就到…...
vue3项目中axios的常见用法和封装拦截(详细解释)
1、axios的简单介绍 Axios是一个基于Promise的HTTP客户端库，用于浏览器和Node.js环境中发送HTTP请求。它提供了一种简单、易用且功能丰富的方式来与后端服务器进行通信。能够发送常见的HTTP请求，并获得服务端返回的数据。 此外，Axios还提供…...
基础语法（一）（1）
常量和表达式 在这里，我们可以把Python当成一个计算器，来进行一些算术运算 例如： print(1 2 - 3) print(1 2 * 3) print(1 2 / 3)注意： print是一个python内置的函数，这个稍后我们会进行介绍 可以使用-*/&…...
YOLOv8模型yaml结构图理解（逐层分析）
前言 YOLO-V8（官网地址）：https://github.com/ultralytics/ultralytics 一、yolov8配置yaml文件 YOLOv8的配置文件定义了模型的关键参数和结构，包括类别数、模型尺寸、骨架（backbone）和头部（hea…...
【大数据】Zookeeper 集群及其选举机制
Zookeeper 集群及其选举机制 1.安装 Zookeeper 集群2.如何选取 Leader 1.安装 Zookeeper 集群 我们之前说了，Zookeeper 集群是由一个领导者（Leader）和多个追随者（Follower）组成，但这个领导者是怎么选出来的…...
Redis 过期策略
我们在set key的时候可以设置key的过期时间，哪redis是怎么处理过期的key的呢？ 有三种过期策略 定时过期：每个设置过期时间的key会创建一个定时器，到过期时间就会立即对key进行清除。该策略可以立即清除过期的数据，对…...
RT_Thread 调试笔记：串口打印、MSH控制台 相关
说明：记录日常使用 RT_Thread 开发时做的笔记。 持续更新中，欢迎收藏。 1.打印相关 1.打印宏定义，可以打印打印所在文件，函数，行数。 #define PRINT_TRACE() printf("-------%s:%s:%d------\r\n", __FIL…...
（适趣AI）Vue笔试题
📑前言 本文主要是【Vue】——（适趣AI）Vue笔试题的文章，如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介：大家好，我是听风与他🥇 ☁️博客首页：CSDN主页听风与他 …...
Matytype的安装问题（word及PPT报错问题）
特别针对：mathtype安装了多次，又卸载了多次的用户。 Word报弹错错误：参考 mathtype安装后，打开word出现没找到dll的错误，这个问题较好解决。 如何解决MathType兼容Office 2016-MathType中文网 PPT（PowerPoi…...
docker拉取镜像提示 remote trust data does not exist for xxxxxx
1、How can I be sure that I am pulling a trusted image from docker 2、docker: you are not authorized to perform this operation: server returned 401. 以上两个问题可以试试以下解决办法 DOCKER_CONTENT_TRUSTfalse 本人是使用jenkins部署自己的项目到docker容器出现…...
ElasticSearch Nested类型全文检索、聚合查询
ElasticSearch Nested类型全文检索、聚合查询 Nested类型全文检索 创建索引 PUT /products1 {"mappings": {"properties": {"fulltext": {"type": "text"},"name": {"type": "text","…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...