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对象【上】

相关内容

热门资讯

保存时出现了1个错误，导致这篇... 当保存文章时出现错误时，可以通过以下步骤解决问题：查看错误信息：查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1）设置位置控制模式   2）绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分，它可以提供高速稳定的网络连接。但是，有时候我们会遇到不能访问光...
表格中数据未显示 当表格中的数据未显示时，可能是由于以下几个原因导致的：HTML代码问题：检查表格的HTML代码是否正...
本地主机上的图像未显示 问题描述：在本地主机上显示图像时，图像未能正常显示。解决方法：以下是一些可能的解决方法，具体取决于问...
表格列调整大小出现问题 问题描述：表格列调整大小出现问题，无法正常调整列宽。解决方法：检查表格的布局方式是否正确。确保表格使...
不一致的条件格式 要解决不一致的条件格式问题，可以按照以下步骤进行：确定条件格式的规则：首先，需要明确条件格式的规则是...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限：此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介： 银河麒麟高级服务器操作系统V10是针对企业级关键业务...