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

相关内容

热门资讯

前端-session、jwt 目录：   （1）session （2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作： 我们首先创建了一个文件并在这个文件里面添加了...
关于测试，我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语，但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组，我们想大量频繁的去访问L到R这个区间的和，...
nodejs：本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本，node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构：jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路，走一条最大的...
常用的DOS命令 常用的DOS命令 DOS（Disk Operating System，磁...
＜C++＞ 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数，cons...