linux办公网
006+limou+HTML——（6）HTML表单
创始人
2024-05-31 05:11:43
0次

000、

表单和表格不一样，表单含有“文本框”、“按钮”、“单选框”、“复选框”、“下拉列表”等

（1）作用

用于声明一个表单，内部包含“文本框”、“按钮”、“单选框”、“复选框”、“下拉列表”等所有的表单标签。如果需要表单和服务器交互，则必须写，如果不用，其实也可以不写

（2）属性

在这里插入图片描述


网页标题

001、

（1）作用

在浏览器中显示供用户交互的表单

（2）属性[type]

在这里插入图片描述

（3）各个属性的应用

①单行文本框

  • 简单使用如下

网页标题
姓名：

在这里插入图片描述

  • 其本身也具有属性

在这里插入图片描述


网页标题
姓名：
姓名：

在这里插入图片描述

②密码文本框

  • 本身和单行文本框类似，但是其输入字符不可见，简单使用如下

网页标题
姓名：
姓名：
密码：

在这里插入图片描述

  • 拥有和单行文本框一样的属性

网页标题
姓名：
姓名：
密码：
密码：

在这里插入图片描述

③单选框

  • 其一般直接配合自己的属性[name]、[value]使用，单选是指：在同属于一个[name]的多个选项中选一个。如果忘记写[name]，或者是不同一组name的情况下就会出现“多选”的情况

网页标题
姓名：
姓名：
密码：
密码：
性别：男女

在这里插入图片描述

  • 如果需要默认选择某一项，可以使用单选框自身的属性[checked]，直接加在想要的单选框标签内部的最后面就可以，可以写成有属性值的形式，也可以直接简写（以下存在三类单选框，因为有三种name）

网页标题
姓名：
姓名：
密码：
密码：
性别：男女
性别：男女
性别：男女

在这里插入图片描述

  • 另外如果可以，请再写得规范些，在表单标签何后面的文本使用

网页标题
姓名：
姓名：
密码：
密码：
性别：
性别：
性别：

在这里插入图片描述

④多选框

  • 简单使用如下

网页标题
姓名：
姓名：
密码：
密码：
性别：
性别：
性别：
你喜欢的水果：苹果香蕉西瓜李子

在这里插入图片描述

  • 如果需要默认选择某一项，可以使用多选框自身的属性[checked]，直接加在想要的多选框标签内部的最后面就可以，可以写成有属性值的形式，也可以直接简写

网页标题
姓名：
姓名：
密码：
密码：
性别：
性别：
性别：
你喜欢的水果：苹果香蕉西瓜李子

在这里插入图片描述

⑤按钮

  • 普通按钮，一般配合Javascript使用，这里可以不管下面代码的Javascript部分

网页标题
1.1.姓名：
1.2.姓名：
2.1.密码：
2.2.密码：
3.1.性别：
3.2.性别：
3.3.性别：
4.你喜欢的水果：苹果香蕉西瓜李子
5.按钮

在这里插入图片描述

  • 提交按钮和普通按钮外观没有什么区别，这个以后再了解，提交按钮主要是用来给服务器提交数据的

网页标题
1.1.姓名：
1.2.姓名：
2.1.密码：
2.2.密码：
3.1.性别：
3.2.性别：
3.3.性别：
4.你喜欢的水果：苹果香蕉西瓜李子
5.普通按钮
6.提交按钮

在这里插入图片描述

  • 重置按钮，用来清除用户的输入内容，不过只清楚一个表单标签
    中的内容

网页标题1.1.姓名：
1.2.姓名：
2.1.密码：
2.2.密码：
3.1.性别：
3.2.性别：
3.3.性别：
4.你喜欢的水果：苹果香蕉西瓜李子
5.普通按钮
6.提交按钮
账号：
密码：

⑥文件上传

  • 文件上传涉及较多的后端知识，这里就不细讲了。点击“选择文件”就会弹出文件选择窗口

网页标题
1.1.姓名：
1.2.姓名：
2.1.密码：
2.2.密码：
3.1.性别：
3.2.性别：
3.3.性别：
4.你喜欢的水果：苹果香蕉西瓜李子
5.普通按钮
6.提交按钮
账号：
密码：
7、文件上传

在这里插入图片描述

003、

在这里插入图片描述

004、

在这里插入图片描述

（2）属性

①

在这里插入图片描述

②


网页标题
个人简介

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：如何在MySQL 8中实现数据迁移？这里有一个简单易用的方案

下一篇：JavaScript对象【上】

相关内容

热门资讯

AWSECS：访问外部网络时出... 如果您在AWS ECS中部署了应用程序，并且该应用程序需要访问外部网络，但是无法正常访问，可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如，在Dockerfile中添加以下代码：FR...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限，您可以使用AWS Identity and Access Ma...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介： 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件，主要用于保护内网安全。在日常使用过程中，卸载该软件是一种常...
群晖外网访问终极解决方法：IP... 写在前面的话 受够了群晖的quickconnet的小水管了，急需一个新的解决方法&#x...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
Azure构建流程（Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤，确保正确配置了“Arti...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分，它可以提供高速稳定的网络连接。但是，有时候我们会遇到不能访问光...