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、</h1> <h2>（1）作用</h2> <p>多行文本框，可以输入多行文本</p> <h2>（2）属性</h2> <ul><li>[rows]是行数</li><li>[cols]是列数</li><li>[value]是取值，但是默认显示文本不在这里显示，而是标签对的内部设置</li></ul> <pre><code class="prism language-html"><!DOCTYPE html> <html><head><meat charset="utf-8"/><title>网页标题</title></head><body><form method="post">个人简介<br/><textarea rows="5" cols="20">请介绍一下你自己

004、请介绍一下你自己

（2）属性

①请介绍一下你自己

在这里插入图片描述

②


网页标题个人简介
请介绍一下你自己

在这里插入图片描述

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

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

下一篇：JavaScript对象【上】

006+limou+HTML——（6）HTML表单

000、

（1）作用

（2）属性

001、

（1）作用

（2）属性[type]

（3）各个属性的应用

①单行文本框

②密码文本框

③单选框

④多选框

004、请介绍一下你自己

（2）属性

相关内容

热门资讯

006+limou+HTML——（6）HTML表单

000、

（1）作用

（2）属性

001、

（1）作用

（2）属性[type]

（3）各个属性的应用

①单行文本框

②密码文本框

③单选框

④多选框

004、和 （1）作用 下拉列表由这两个标签组成，类似无序列表的使用（和配合使用） 网页标题个人简介请介绍一下你自己HTMLCSSJavascriptPythonVue.js

（2）属性

相关内容

热门资讯

004、请介绍一下你自己