当前位置： 首页 > news >正文

编程笔记 html5cssjs 022 HTML表单概要

news 文章来源：https://blog.csdn.net/qq_40071585/article/details/135369596 2024/10/28 15:25:04

编程笔记 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 属性三、操作小结 网页光是输出没有输入可不行&#xff0c;因为输出还是比输入容易&#xff0c;所有就先接触输出&#xff0c;后学习输入。html用来输入的东西叫“表单”。 HTML 表单用于搜…...

编程日记 2024/1/6 22:19:08

​三子棋（c语言）

前言&#xff1a; 三子棋是一种民间传统游戏&#xff0c;又叫九宫棋、圈圈叉叉棋、一条龙、井字棋等。游戏规则是双方对战&#xff0c;双方依次在9宫格棋盘上摆放棋子&#xff0c;率先将自己的三个棋子走成一条线就视为胜利。但因棋盘太小&#xff0c;三子棋在很多时候会出现和…...

编程日记 2024/1/6 22:18:08

MySQL-DCL

DCL是数据控制语言&#xff0c;用来管理数据库用户&#xff0c;控制数据库的访问权限。 管理用户&#xff1a;管理哪些用户可以访问哪些数据库 1.查询用户 USE mysql; SELECT * FROM user; 注意&#xff1a; MySQL中用户信息和用户的权限信息都是记录在mysql数据库的user表中的…...

编程日记 2024/1/6 22:16:06

QT开源类库集合

QT开源类库集合 一、自定义控件 QSintQicsTableLongscroll-qtAdvanced Docking System 二、图表控件 QwtQCustomPlotJKQTPlotter 三、网络 QHttpEngineHTTP 四、 音视频 vlc-qt 五、多线程 tasks 六、数据库 EasyQtSql 一、自定义控件 1. QSint 源代码地址&#xff1a;QSint&…...

编程日记 2024/1/6 22:15:05

C++ STL（2）--算法(2)

算法(2)----STL里的排序函数。 1. sort: 对容器或普通数组中指定范围内的元素进行排序&#xff0c;默认进行升序排序。 sort函数是基于快速排序实现的&#xff0c;属于不稳定排序。 只支持3种容器&#xff1a;array、vector、deque。 如果容器中存储的是自定义的对象&#xff…...

编程日记 2024/1/6 22:14:04

格密码基础：对偶格（超全面）

目录 一. 对偶格的格点 1.1 基本定义 1.2 对偶格的例子 1.3 对偶格的图形理解 二. 对偶格的格基 2.1 基本定义 2.2 对偶格的格基证明 三. 对偶格的行列式 3.1 满秩格 3.2 非满秩格 四. 重复对偶格 五. 对偶格的转移定理&#xff08;transference theorem&#xff…...

编程日记 2024/1/6 22:13:03

ECMAScript简介及特性

ECMAScript是一种由ECMA国际&#xff08;前身为欧洲计算机制造商协会&#xff09;制定和发布的脚本语言规范&#xff0c;JavaScript在它基础上进行了自己的封装。ECMAScript和JavaScript的关系是&#xff0c;前者是后者的规格&#xff0c;后者是前者的一种实现。 ECMAScript的…...

编程日记 2024/1/6 22:10:00

csdn中的资源文件如何删除？

csdn中的资源文件如何删除&#xff1f; 然后写文章的时候 点击资源绑定&#xff0c;解锁资源&#xff0c;就可以再次上传。...

编程日记 2024/1/6 22:08:59

NA原理及配置

在IP地址空间中&#xff0c;a&#xff1b;b&#xff1b;c类地址中各有一部分地址&#xff0c;被称为私有IP地址&#xff08;私网地址&#xff09;&#xff0c;其余的为公有IP地址&#xff08;公网地址&#xff09; A&#xff1a;10.0.0.0 - 10.255.255.255 --- 相当于1条A类网段…...

编程日记 2024/1/6 22:06:58

解决：TypeError: ‘tuple’ object does not support item assignment

解决&#xff1a;TypeError: ‘tuple’ object does not support item assignment 文章目录 解决&#xff1a;TypeError: tuple object does not support item assignment背景报错问题报错翻译报错位置代码报错原因解决方法方法一&#xff1a;方法二&#xff1a;今天的分享就到…...

编程日记 2024/1/6 22:03:54

vue3项目中axios的常见用法和封装拦截(详细解释)

1、axios的简单介绍 Axios是一个基于Promise的HTTP客户端库&#xff0c;用于浏览器和Node.js环境中发送HTTP请求。它提供了一种简单、易用且功能丰富的方式来与后端服务器进行通信。能够发送常见的HTTP请求&#xff0c;并获得服务端返回的数据。 此外&#xff0c;Axios还提供…...

编程日记 2024/1/6 22:01:53

基础语法（一）（1）

常量和表达式 在这里&#xff0c;我们可以把Python当成一个计算器&#xff0c;来进行一些算术运算 例如&#xff1a; print(1 2 - 3) print(1 2 * 3) print(1 2 / 3)注意&#xff1a; print是一个python内置的函数&#xff0c;这个稍后我们会进行介绍 可以使用-*/&…...

编程日记 2024/1/6 21:59:51

YOLOv8模型yaml结构图理解（逐层分析）

前言 YOLO-V8&#xff08;官网地址&#xff09;&#xff1a;https://github.com/ultralytics/ultralytics 一、yolov8配置yaml文件 YOLOv8的配置文件定义了模型的关键参数和结构&#xff0c;包括类别数、模型尺寸、骨架&#xff08;backbone&#xff09;和头部&#xff08;hea…...

编程日记 2024/1/6 21:56:48

【大数据】Zookeeper 集群及其选举机制

Zookeeper 集群及其选举机制 1.安装 Zookeeper 集群2.如何选取 Leader 1.安装 Zookeeper 集群 我们之前说了&#xff0c;Zookeeper 集群是由一个领导者&#xff08;Leader&#xff09;和多个追随者&#xff08;Follower&#xff09;组成&#xff0c;但这个领导者是怎么选出来的…...

编程日记 2024/1/6 21:55:47

Redis 过期策略

我们在set key的时候可以设置key的过期时间&#xff0c;哪redis是怎么处理过期的key的呢&#xff1f; 有三种过期策略 定时过期&#xff1a;每个设置过期时间的key会创建一个定时器&#xff0c;到过期时间就会立即对key进行清除。该策略可以立即清除过期的数据&#xff0c;对…...

编程日记 2024/1/6 21:53:45

RT_Thread 调试笔记：串口打印、MSH控制台 相关

说明&#xff1a;记录日常使用 RT_Thread 开发时做的笔记。 持续更新中&#xff0c;欢迎收藏。 1.打印相关 1.打印宏定义&#xff0c;可以打印打印所在文件&#xff0c;函数&#xff0c;行数。 #define PRINT_TRACE() printf("-------%s:%s:%d------\r\n", __FIL…...

编程日记 2024/1/6 21:52:44

（适趣AI）Vue笔试题

&#x1f4d1;前言 本文主要是【Vue】——&#xff08;适趣AI&#xff09;Vue笔试题的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 …...

编程日记 2024/1/6 21:51:42

Matytype的安装问题（word及PPT报错问题）

特别针对&#xff1a;mathtype安装了多次&#xff0c;又卸载了多次的用户。 Word报弹错错误&#xff1a;参考 mathtype安装后&#xff0c;打开word出现没找到dll的错误&#xff0c;这个问题较好解决。 如何解决MathType兼容Office 2016-MathType中文网 PPT&#xff08;PowerPoi…...

编程日记 2024/1/6 21:50:41

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容器出现…...

编程日记 2024/1/6 21:49:40

ElasticSearch Nested类型全文检索、聚合查询

ElasticSearch Nested类型全文检索、聚合查询 Nested类型全文检索 创建索引 PUT /products1 {"mappings": {"properties": {"fulltext": {"type": "text"},"name": {"type": "text","…...

编程日记 2024/1/6 21:48:39

专业级的渗透测试服务，助力航空业数字化安全启航

​某知名航空公司是中国首批民营航空公司之一&#xff0c;运营国内外航线200多条&#xff0c;也是国内民航最高客座率的航空公司之一。在数字化发展中&#xff0c;该航空公司以数据驱动决策&#xff0c;通过精细化管理、数字创新和模式优化等方式&#xff0c;实现了精准营销和个…...

编程日记 2024/1/6 21:46:37

【docker】安装 Redis

查看可用的 redis版本 docker search redis拉取 redis最新镜像 docker pull redis:latest查看本地镜像 docker images创建挂在文件 mkdir -pv /test1/docker_volume/redis/datamkdir -pv /test1/docker_volume/redis/confcd /test1/docker_volume/redis/conf/touch redis.con…...

编程日记 2024/1/6 21:45:36

pinia的独立维护，统一导出及持久化

目录 1.说明及示例 2.注意 1.说明及示例 在src下创建store文件夹&#xff0c;在store文件夹下创建index.js文件&#xff0c;内容如下&#xff1a; import { createPinia } from "pinia"; // pinia的持久化 import piniaPluginPersistedstate from "pinia-pl…...

编程日记 2024/1/6 21:44:35

【AI视野·今日Robot 机器人论文速览 第六十七期】Mon, 1 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Mon, 1 Jan 2024 Totally 16 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers MURP: Multi-Agent Ultra-Wideband Relative Pose Estimation with Constrained Communications in 3D Environments Authors A…...

编程日记 2024/1/6 21:40:31

FBL刷写

刷写 1、刷写需求的理解2、刷写流程2.1、预编程阶段&#xff1a;保证在编程阶段的动作能够正常操作&#xff0c;控制器给响应。整车功能不会出现问题 刷写某一控制器时&#xff0c;避免其他控制器集DTC,85控制DTC&#xff1b; 28 通信控制.保证总线负载率不要过高&#xff08;下…...

编程日记 2024/1/6 21:39:30

OpenCV-Python(24)：模板匹配

原理及介绍 模板匹配是一种常用的图像处理技术&#xff0c;它用于在一幅图像中寻找与给定模板最匹配的区域(在一副大图中搜寻查找模版图像位置的方法)。模板匹配的基本思想是将模板图像在目标图像上滑动&#xff0c;并计算它们的相似度&#xff0c;找到相似度最高的位置即为匹配…...

编程日记 2024/1/6 21:37:29

机器学习--回归算法

&#x1f333;&#x1f333;&#x1f333;小谈&#xff1a;一直想整理机器学习的相关笔记&#xff0c;但是一直在推脱&#xff0c;今天发现知识快忘却了&#xff08;虽然学的也不是那么深&#xff09;&#xff0c;但还是浅浅整理一下吧&#xff0c;便于以后重新学习。 &#x1…...

编程日记 2024/1/6 21:34:25

计算机网络——多址复用技术

1. 频分多址&#xff08;FDMA&#xff09; 1.1 基本原理 频率分配&#xff1a;在FDMA系统中&#xff0c;整个可用的频带被分割成多个较小的频带或通道。每个通道分配给一个用户。 时间利用&#xff1a;用户在分配给他们的频道上持续进行通信&#xff0c;不受时间限制。 1.2 优…...

编程日记 2024/1/6 21:33:24

stm32 HAL库 4096线ABZ编码器

[TOC]目录 ABZ编码器 4096线 买的是这个 AB相代表计数方向&#xff0c;Z代表过零点 cubemx配置 定时器Encoder 也可以选上DMA 中断 Z相GPIO中断 找一个空闲管脚 打开对应中断 代码 不用DMA int main(void) {short Enc_cnt 0;HAL_TIM_Encoder_Start_IT(&ht…...

编程日记 2024/1/6 21:29:20

Java爬虫之Jsoup

1.Jsoup相关概念 Jsoup很多概念和js类似&#xff0c;可参照对比理解 Document &#xff1a;文档对象。每份HTML页面都是一个文档对象&#xff0c;Document 是 jsoup 体系中最顶层的结构。 Element&#xff1a;元素对象。一个 Document 中可以着包含着多个 Element 对象&#…...

编程日记 2024/1/6 21:26:16

有了域名就可以做网站了吗/职业技能培训有哪些

1.spring运行期例外(unchecked Exception)事务可以回滚,用户例外(checked Exception,即try...catch...finally块)事务不回滚;2.若要checked Exception回滚,在需要回滚的方法前添加注解:Transactional(rollbackForException.class)3.要unchecked Exception不回滚,在需要回滚的方…...

编程日记 2024/10/28 13:49:50

慈溪企业网站建设/怎么联系百度客服人工服务

大侠好&#xff0c;欢迎来到FPGA技术江湖&#xff0c;江湖偌大&#xff0c;相见即是缘分。大侠可以关注FPGA技术江湖&#xff0c;在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源&#xff0c;或者一起煮酒言欢。今天给大侠带来如何将FPGA程序固化到外部Flash存储…...

编程日记 2024/10/28 13:05:10

网站改版升级通知/网络营销渠道有哪几种

运动方程和观测方程&#xff1a;Xk代表相机的本时刻的运动和上一次运动之间的关系&#xff1b;Zkj表示的是第k时刻相机和第j个物体之间的距离信息。具体两个方程的解释可以查看&#xff1a;通俗易通解释SLAM问题的数学描述&#xff1a;运动方程和观测方程_梧桐雪的博客-CSDN博客…...

编程日记 2024/10/28 12:18:33

杭州网站设计的公司/百度推广最简单方法

背景 通过添加下列类&#xff0c;可以快捷的变换背景颜色&#xff0c;如果是链接的话&#xff0c;鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类&#xff0c;显示吃淡蓝色&#xff0c;文本颜色会变成白色。bg-success 被修饰元素表示成功的信息&#xff0c;背景变…...

编程日记 2024/10/28 9:03:30

用.net做网站好_还是用php/台州seo快速排名

author&#xff1a;咔咔 wechat&#xff1a;fangkangfk 看了文档后&#xff0c;说这种写法是获取form模块&#xff0c;也就是说操作from模块需要使用form来调用 保存按钮的lay_fileter的值&#xff0c;就是监听提交事件的test //监听提交按钮form.on(submit(test), function(…...

编程日记 2024/10/28 8:59:22

重庆网站建设 优化/发广告平台有哪些

https://vjudge.net/problem/CodeForces-1328B 题目大意&#xff1a;一个长度为nnn的字符串&#xff0c;两个字符为bbb&#xff0c;其余的字符均为aaa&#xff0c;那么满足题意的不同的字符串有n∗(n−1)/2n*(n-1)/2n∗(n−1)/2种&#xff0c;现在给定kkk&#xff0c;求字典序第…...

编程日记 2024/10/28 8:15:58