编程笔记 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","…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识：什么是 B-Tree 和 BTree？ B-Tree（平衡多路查找树） BTree（B-Tree 的变种） 二、结构对比：一张图看懂 三、为什么 MySQL InnoDB 选择 BTree？ 1. 范围查询更快 2…...
探索Selenium：自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...