006+limou+HTML——（6）HTML表单
创始人
2024-05-31 04:34:52
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”。

上一篇：用Python优雅地求解阿基米德分牛问题

下一篇：MySQL事务篇

相关内容

热门资讯

球桌计费系统安装视频,球桌计费... 球桌计费系统安装视频教程，轻松提升球馆管理效率随着社会经济的发展，球桌娱乐场所如雨后春笋般涌现。为了...
氨制冷系统安装手续,氨制冷系统... 氨制冷系统安装手续概述氨制冷系统作为一种高效、环保的制冷方式，广泛应用于食品加工、医药、化工等行业。...
包装系统工程安装,提升效率与品... 包装系统工程安装：提升效率与品质的关键步骤随着市场竞争的日益激烈，企业对产品包装的重视程度不断提升。...
安卓子系统安装方法 Windows 11 安卓子系统安装方法详解一、准备工作在开始安装安卓子系统之前，我们需要做一些准备...
安装系统怎么调出命令框,安装系... 安装系统时如何调出命令框Windows系统安装过程中调出命令框的方法在Windows系统的安装过程中...
奥迪车载系统安装,提升驾驶体验... 奥迪车载系统安装全攻略：提升驾驶体验的必备步骤随着汽车技术的不断发展，车载系统已经成为衡量一辆汽车智...
安装虚拟机系统报错,安装虚拟机... 安装虚拟机系统时常见报错及解决方法随着虚拟技术的不断发展，越来越多的用户选择使用虚拟机来运行不同的操...
斑马系统安装电脑,轻松实现车载... 斑马系统安装电脑教程：轻松实现车载娱乐升级一、准备工作在开始安装斑马系统之前，我们需要做好以下准备工...
安装与配置监控系统,CentO... CentOS 7.X 系统上安装与配置监控系统的详细教程随着信息化时代的到来，监控系统在保障系统稳定...
安装支付宝收银系统,如何安装支... 如何安装支付宝收银系统？——全面指南随着移动支付的普及，支付宝收银系统已成为众多商家提升支付效率和顾...
清洗系统插件怎么安装,清洗系统... 清洗系统插件安装指南随着计算机使用频率的增加，系统中的缓存、临时文件和垃圾数据会逐渐积累，影响计算机...
安卓adb安装系统,全面教程与... 安卓ADB安装系统：全面教程与注意事项随着智能手机的普及，Android系统因其开放性和可定制性而受...
安装系统怎么跳过检查,安装系统... 安装系统时如何跳过检查在安装操作系统时，系统往往会进行一系列的检查，以确保硬件和软件的兼容性。然而，...
安装系统中英文,Windows... Windows系统中英文安装指南随着全球化的推进，许多用户在安装操作系统时可能会遇到需要选择系统语言...
安卓迷你pc安装系统,安卓迷你... 安卓迷你PC安装系统的详细指南一、准备工作在开始安装系统之前，请确保您已准备好以下物品： 安卓迷你...
安装怎么定位系统的位置,车辆定... 车辆定位系统安装位置详解一、车辆定位系统的常见安装位置1. 前后保险杠内侧车辆定位系统可以安装在前后...
安装在硬盘上的linux系统怎... 安装硬盘上的Linux系统概述Linux系统因其开源、稳定、安全等特点，受到越来越多用户的喜爱。将L...
安装足浴洗浴系统,足浴洗浴系统... 足浴洗浴系统安装指南随着生活水平的提高，人们对健康养生的需求日益增长，足浴洗浴系统逐渐成为家庭和公共...
安装中兴系统的电脑,中兴新支点... 中兴新支点操作系统安装指南随着我国科技实力的不断提升，国产操作系统逐渐崭露头角。中兴新支点操作系统（...
安卓平板系统安装韩文,安卓平板... 安卓平板系统安装韩文教程一、准备工作在开始安装韩文系统之前，请确保您的安卓平板电脑满足以下条件： ...