HTML之表单学习记录

如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流）​，那就是动态页面。表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

在HTML中，表单标签有五种：form、input、textarea、select和option。

表单效果：

 从外观上来划分，表单可以分为以下八种。

  • 单行文本
  • 框密码文本框
  • 单选框
  • 复选框
  • 按钮
  • 文件上传
  • 多行文本框
  • 下拉列表

创建一个表单，就像创建一个表格，我们也必须要把所有表单标签放在form标签内部。

form标签常用属性如表：

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个，一个是get，另外一个是post。get在安全性较差，而post安全性较好。所以在实际开发中，我们都是使用post。

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。 

在form标签中，target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到_blank这一个属性值。

在HTML中，大多数表单都是使用input标签来实现的。

<input type="表单类型" />

练习题：

代码：

 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>表单练习题</title>
</head>
<body><form method="post" >昵称：<input type="text" name="nickname" size="20"/><br/>密码：<input type="passwword" name="password" size="20"/><br/>邮箱：<input type="email" name="email" size="20"/>&nbsp;&nbsp;<select><option value="qq.com">qq.com</option><option value="163.com">163.com</option><option value="gmail.com">gmail.com</option><option value="yahoo.com">yahoo.com</option></select><br/>性别：<input type="radio" name="sex" value="男" checked/>男<input type="radio" name="sex" value="女"/>女<br/>爱好：<input type ="checkbox" name="旅游"/>旅游<input type="checkbox" name="摄影"/>摄影<input type="checkbox" name="运动"/>运动<br/>个人简介：<br/><textarea name="intro" rows="5" cols="50"></textarea><br/>上传个人照片：<br/><input type="file" name="photo"><br/><hr/><input type ="submit" value="立即注册" /><br/></form>
</body>
</html>

效果图：

练习过程的代码：

<!DOCTYPE html>
<html><head><title></title><meta charset="UTF-8"></head><body><!-- input、textarea、select、option都是表单标签，我们必须要放在form标签内部 --><form name="MyForm" method="post"><input type="text" value="这是一个单行文本框"/><br/><textarea>这是一个多行文本框</textarea><br/><!-- 下拉列表 --><select><option>HTML</option><option>CSS</option><option>JavaScript</option></select><br/><!-- 单行文本框 --><!-- value属性：显示默认值，size属性：设置输入框的宽度，maxlength属性：设置输入框的最大长度 -->姓名：<input type="text" value ="张三" size="10" maxlength="10"/><br/><!-- 密码框 -->密码：<input type="password" value="123456" size="5" maxlength="10"/><br/><!-- 单选框 --><!-- name属性表示单选按钮所在的组名，互斥用；而value表示单选按钮的取值(不显示)，这两个属性必须要设置。 -->性别：<input type="radio" name="gender" value="男"/>男<input type="radio" name ="gender" value="女"/>女<br/><!-- 默认checked属性表示默认选中 -->性别：<input type="radio" name="gender" value="男" checked/>男<input type="radio" name ="gender" value="女"/>女<br/><!-- 没有加上name属性，预览效果好像没有变化。但是当我们选取的时候，会发现居然可以同时选中两个选项 --><!-- 因此我们必须要加上name属性。有小伙伴就会问了：在同一组单选框中，name属性取值一样 -->年龄：<input type="radio" name="age" value="18"/><input type="radio" name="age" value="19"/><input type="radio" name="age" value="20"/><br/>年龄：18<input type="radio" name="age" value="18"/>19<input type="radio" name="age" value="19"/>20<input type="radio" name="age" value="20"/><br/><!-- 对于单选框，加不加value好像没啥区别啊？为啥还加上呢？value属性取值一般跟后面的文本相同，之所以加上value属性，是为了方便JavaScript或者服务器操作数据。所有表单元素的value属性的作用都是一样的 --><!-- 为了得到更好的语义化，表单元素与后面的文本一般都需要借助label标签关联起来。 -->年龄：<label>18<input type="radio" name="age" value="18"/></label><label>19<input type="radio" name="age" value="19"/></label><label>20<input type="radio" name="age" value="20"/></label><br/><!-- 复选框 --><input type="checkbox" name="组名" value="取值"/>复选框1<br/>你喜欢的水果：<br/><input type="checkbox" name="fruits" value="苹果" checked/>苹果<input type="checkbox" name="fruits" value="香蕉" checked/>香蕉<input type="checkbox" name="fruits" value="橘子"/>橘子<br/><!-- 按钮 --><!-- 在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。 --><input type="button" value="确定" onclick="alert('确定按钮被点击了！')"/><!-- 提交按钮 --><input type="submit" value="提交"/><!-- 重置按钮 --><!-- 在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。 --><!-- 重置按钮只能清空它所在form标签内表单中的内容，对于当前所在form标签之外的表单清除无效。 --><input type="reset" value="重置"/><!-- 文件上传 --><br/>文件上传：<input type="file" /><br/><!-- 多行文本框 --><textarea rows="5" cols="30" value="多行文本框">默认显示文本</textarea><br/>个人简介：<br/><textarea rows="5" cols="30" name="intro">请输入个人简介</textarea><br/><!-- 隐藏域 --><!-- 隐藏域是指在表单中，用户不可见，但又需要提交给服务器的数据。 --><input type="hidden" name="hidden" value="隐藏数据"><br/></form><!-- 下拉列表：显示多项 --><form method="post"><select multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="橘子">橘子</option><option value="葡萄">葡萄</option><option value="柚子">柚子</option></select><!-- 将size取值为1、2、3时，会发现在Chrome浏览器中无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。 --><select multiple size="2"><option value="苹果" selected>苹果</option><option value="香蕉">香蕉</option><option value="橘子">橘子</option><option value="葡萄">葡萄</option><option value="柚子">柚子</option></select><!-- selected属性表示列表项是否被选中 --></form></body>
</html>

效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/14948.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

redis 原理篇 30 redis内存回收 过期key处理

redis 原理篇 30 redis内存回收 过期key处理

三十分&#xff0c;又是一个长视频&#xff0c;挺好&#xff0c;但是从标题来看&#xff0c;内容应该很简单&#xff0c;或者说&#xff0c;是他能讲简单的类型&#xff0c;本来还想再搞一篇&#xff0c;但是三十分钟的话&#xff0c;五点五十了&#xff0c;算了&#xff0c;下…
阅读更多...
【STM32F1】——无线收发模块RF200与串口通信

【STM32F1】——无线收发模块RF200与串口通信

【STM32F1】——无线收发模块RF200与串口通信 一、简介 本篇主要对调试无线收发模块RF200的过程进行总结，实现了以下功能。 串口普通收发：使用STM32F103C8T6的USART2串口接收中断，实现两个无线收发模块RF200间的通信。二、RF200介绍 电压：3.4-5.5V工作频率：418~455MHz发…
阅读更多...
【MySQL从入门到放弃】InnoDB磁盘结构(二)

【MySQL从入门到放弃】InnoDB磁盘结构(二)

前言 前面我们解析了InnoDB磁盘结构中的表空间、数据字典、双写缓冲区。 本文我们继续探究磁盘结构中剩余的几个核心组件：重做日志（redo log）、撤销日志（undo log）、二进制日志（binlog） 一、重做日志 ( redo log ) WAL（Write-Ahead Logging）机制 WAL 的全称是…
阅读更多...
Python 绘图工具详解：使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

Python 绘图工具详解：使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

目录 数据可视化1.使用 matplotlib 库matplotlib 库 2 .使用 seaborn 库seaborn 库 3 .使用 pyecharts库pyecharts库 注意1. 确保安装了所有必要的库2. 检查Jupyter Notebook的版本3. 使用render()方法保存为HTML文件4. 使用IFrame在Notebook中显示HTML文件5. 检查是否有其他输…
阅读更多...
用vscode编写verilog时，如何有信号定义提示、信号定义跳转（go to definition）、模块跳转这些功能

用vscode编写verilog时，如何有信号定义提示、信号定义跳转（go to definition）、模块跳转这些功能

&#xff08;一&#xff09;安装插件SystemVerilog - Language Support 安装一个vscode插件即可&#xff0c;插件叫SystemVerilog - Language Support。虽然说另一个插件“Verilog-HDL/SystemVerilog/Bluespec SystemVerilog”也有信号提示及定义跳转功能&#xff0c;但它只能提…
阅读更多...
LLM RAG系列：一文详解RAG，看完这篇你必会（文末福利）

LLM RAG系列：一文详解RAG，看完这篇你必会（文末福利）

RAG系列 本文介绍了RAG以及RAG pipeline的整个流程&#xff0c;包括请求转换、路由和请求构造、索引和检索、生成和评估等&#xff0c;其中引用了大量有价值的论文。 参考Advanced RAG Series: Generation and Evaluation中的5篇文章&#xff0c;并丰富了相关内容。 请求转换…
阅读更多...
服务器硬件介绍

服务器硬件介绍

计算机介绍 现在的人们几乎无时无刻都在使用电脑&#xff01;而且已经离不开电脑了。像桌上的台式电脑(桌机)、笔记本电脑(笔电)、平板电脑、智能手机等等&#xff0c;这些东西都算是电脑。 台式机电脑介绍 计算机又被称为电脑。台式机电脑主要分为主机和显示器两个部分&…
阅读更多...
docker启动mysql数据库镜像，开启大小写不敏感，开启不区分大小写，挂载数据库日志文件，挂载数据库文件

docker启动mysql数据库镜像，开启大小写不敏感，开启不区分大小写，挂载数据库日志文件，挂载数据库文件

docker启动mysql数据库镜像，开启大小写不敏感，开启不区分大小写，挂载数据库日志文件，挂载数据库文件 查询数据库是否区分大小写 SHOW VARIABLES LIKE lower_case_table_names;查询数据库是否支持大小写lower_case_table_names 被设置为 1，即表名不区分大小写。如果值为 1…
阅读更多...
SpringBoot 打造图片阅后即焚功能

SpringBoot 打造图片阅后即焚功能

阅后即焚”&#xff08;Snapchat-like feature&#xff09;是指一种社交媒体或信息传递功能&#xff0c;用户在阅读某条信息或查看某张图片后&#xff0c;该信息或图片会自动销毁&#xff0c;无法再次查看。这种功能的主要目的是保护用户的隐私和信息安全&#xff0c;防止敏感信…
阅读更多...
年轻人应该读毛选（一到五卷）！！！

年轻人应该读毛选（一到五卷）！！！

在线网址&#xff1a;中文马克思主义文库毛泽东 (marxists.org) 书籍的现实意义&#xff0c;往往是在读后很久才能有所体会的。 推荐《毛泽东选集》——智慧与实践的经典之作 今天想给大家推荐一本充满智慧和深刻洞见的书——《毛泽东选集》。这不仅是一本书&#xff0c;更是…
阅读更多...
Java期末复习暨学校第六次上机课作业

Java期末复习暨学校第六次上机课作业

Java期末复习暨学校第六次上机课作业&#xff1a; 第一题&#xff1a; 通过new关键字实例化了一个Students类对象s&#xff0c;并调用set方法分别赋值&#xff0c;最后调用study和introduce方法。 输出结果&#xff1a; 第二题&#xff1a; 给出了一个无参构造方法和有参构造…
阅读更多...
【操作系统】守护进程

【操作系统】守护进程

一、守护进程的概念 守护进程是一个在后台运行并且不受任何终端控制的进程 二、自己实现守护进程 1.预备知识 &#xff08;1&#xff09;/dev/null /dev/null是一个特殊的设备文件&#xff0c;往这个文件里写不进去任何数据&#xff0c;也读不出来任何数据 因此&#xff0…
阅读更多...
MySQL数据库常用命令大全（完整版——表格形式）

MySQL数据库常用命令大全（完整版——表格形式）

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 ✨特色专栏&#xff1a…
阅读更多...
TCP滑动窗口

TCP滑动窗口

TCP滑动窗口&#xff08;Sliding Window&#xff09; 什么是滑动窗口&#xff1f; TCP滑动窗口是TCP协议中的一种流量控制机制&#xff0c;用于调节发送方和接收方之间的数据传输速率&#xff0c;以避免网络拥塞和提高传输效率。 滑动窗口机制允许发送方在不等待确认应答的情…
阅读更多...
main中的int argc, char* argv[]，命令行调用函数时输入参数用的

main中的int argc, char* argv[]，命令行调用函数时输入参数用的

int argc&#xff1a;表示命令行参数的数量。argc 至少为1&#xff0c;因为第一个参数总是程序的名称。char* argv[]&#xff1a;是一个字符指针数组&#xff0c;用于存储每个命令行参数的字符串。argv[0] 是程序的名称&#xff0c;argv[1] 是第一个参数&#xff0c;依此类推。…
阅读更多...
Vue 批量注册组件实现动态组件技巧

Vue 批量注册组件实现动态组件技巧

介绍 Vue 动态组件的应用场景很多,可应用于动态页签,动态路由等场景,其核心原理是批量注册。在Vue2和Vue3中实现原理相同,只是语法略有差异。 Vue2 实现 基于 webpack require.context() 是webpack提供的一个自动导入的API 参数1&#xff1a;加载的文件目录 参数2&#xff…
阅读更多...
仓储管理系统-综合管理（源码+文档+部署+讲解）

仓储管理系统-综合管理（源码+文档+部署+讲解）

本文将深入解析“仓储管理系统-综合管理”的项目&#xff0c;探究其架构、功能以及技术栈&#xff0c;并分享获取完整源码的途径。 系统概述 仓储管理系统-综合管理是一个全面的仓库管理解决方案&#xff0c;旨在通过集成多种功能模块来优化仓库操作和管理流程。该系统提供了…
阅读更多...
xxl-job 是如何注册、注销、维持存活态

xxl-job 是如何注册、注销、维持存活态

我们通过源码发现&#xff0c;xxl-job主要是由客户端发起的注册和存活上报(心跳检测)的&#xff1b; 主要是执行器在启动时&#xff0c;会初始化一个线程&#xff0c;每隔30秒请求调度中心接口&#xff0c;维护存活状态&#xff1b; 注册接口/上报接口&#xff1a;/api/regis…
阅读更多...
Ps：OpenColorIO 设置

Ps：OpenColorIO 设置

Ps菜单&#xff1a;编辑/OpenColorIO 设置 Edit/OpenColorIO Settings 在专业的图像编辑和色彩管理工作流程中&#xff0c;准确的色彩呈现和转换至关重要。OpenColorIO&#xff08;OCIO&#xff09; 是一种开源的色彩管理框架&#xff0c;广泛应用于影视、动画和视觉特效行业。…
阅读更多...
如何抓取某大学网站专业录取分数

如何抓取某大学网站专业录取分数

当我们在浏览器中浏览网页时&#xff0c;网页上显示的数据实际上已经被加载到浏览器内存中&#xff0c;只是以一种可视化的方式呈现出来。那么是否有一种简便的方法可以将这些数据从网页中提取出来&#xff0c;并保存为表格格式呢&#xff1f; 这是某大学的专业分数录取情况数…
阅读更多...
最新文章

Copyright @ 2022~2023