HTML中的表单（☆☆☆）

于 2021-08-24 17:41:23 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端技术 文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cavewang/article/details/119893081
版权

表单

表单概念

概念：用于采集用户输入的数据。用于和服务器进行交互。

<body>
<!--
form：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围
常用属性：
action：指定提交数据的URL
method：指定提交方式，一共七种，以下两种比较常用
get：
1.请求参数会在地址栏中显示，会封装到请求行中。
2.请求参数大小是有限制的。
3.不太安全。
post：
1.请求参数不会在地址栏中显示，会封装在请求体中。
2.请求参数的大小没有限制。
3.较为安全。
-->
    <form action="dest.html" method="get" enctype="multipart/form-data">
          <!--添加表单项元素
              表单项中的数据要想被提交，必须指定其name属性
          -->
    <form/>
</body>

表单项元素中的一些属性

id:元素的唯一表示，不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色

文本框

<!--
    input:表单元素，其中的type属性值不同，会出现不同的表现形式
       文本框：type="text"，text也是input的默认值
       id：表示元素的唯一标识，不推荐重复
       name：表示元素的名称，提交数据到服务器的时候，服务器通过name获取value
       placeholder：文本框显示的提示文字，用户输入自己内容的时候提示文字自动消失
-->
<input type="text" id="userName" name="userName" placeholder="请输入用户名">

密码框

<!--
       密码框：type="password"，用户输入后显示黑色实心园，不显示文本内容
       required：表示用户必须填写此内容，不然无法提交
-->
<input type="password" id="password" name="password" required>

单选按钮

<!--
       单选按钮：type="radio"
       单选按钮都是成组出现，name相同的表示一组。
       value：服务器通过name获取到的值就是value
       checked：表示默认选中
-->
性别:<input type="radio" name="gender" value="男"/>男
     <input type="radio" name="gender" value="女"/>女

复选框

<!--
       复选框：type="checkbox"
       复选框都是成组出现，name相同的表示一组，同组中的复选框可以选择多个
       value：服务器通过name获取到的值就是value
       checked：表示默认选中
-->
爱好:<input type="checkbox" name="hobby" value="swim" />游泳
	<input type="checkbox" name="hobby" value="basket" />篮球
	<input type="checkbox" name="hobby" value="run" />跑步
	<input type="checkbox" name="hobby" value="soccer" />足球

文件域

<!--
       文件域：type="file"
       表单中如果有文件上传，表单中最好有enctype="multipart/form-data"
       multiple属性:表示可以同时上传多个文件
-->
头像:<input type="file" name="headImg" /> <br />

日期-h5中的新特性

<!--
       日期-h5新特性：
       type="date"表示年月日
       type="datetime-local"表示年月日和时间
-->
生日:<input type="datetime-local" name="birthday">

隐藏域

<!--
       隐藏域：type="hidden"页面上看不到任何效果
       作用：隐藏一些用户不关心但是程序员需要的值
-->
隐藏域:<input type="hidden" name="userId" value="1001" />

下拉列表框

<!--
       下拉列表框：select中写name
       option：select中的所有选项
               其中value表示下拉列表中被选中的项的对应值
               其中selected表示默认选中
-->
喜欢吃小熊饼干吗：
			<select name="statu">
				<option value="unknow">请选择</option>
				<option value="yes">喜欢</option>
				<option value="no">喜欢</option>
			</select><br />

在这里插入图片描述

文本域

<!--
       textarea：文本域
       cols：指定列数，每一行有多少个字符
       rows：指定行数
       readonly：表示只读，内容不可修改
       disabled：表示不可用，样式呈现灰色
-->
协议:
			<textarea disabled="disabled" rows="10" cols="15">
				保安服从条款
				1.穿制服
				2.吃饼干
				3.不得调戏业主
			</textarea><br />

在这里插入图片描述

按钮

<!--
       value：按钮上的文字
       type="submit":提交按钮，提交到form的action的指定路径
       type="image"：等价于提交按钮，只是没有value属性，多了一个src="按钮的图片"
       type="reset"：清空表单中所有用户输入，回到默认原始状态，相当于刷新页面
       type="button"：普通按钮，没有任何功能，只有按钮的长相而已
-->
<input type="submit" value="注册"/>
<input type="reset" value="重置信息" /><br />
<input type="image" src="img/屏幕截图 2021-08-22 203636.png"/><br />
<input type="button" value="普通按钮" id="btn" /><br />

button标签可以与input实现的按钮相互替换
在这里插入图片描述

标签label

<!--
       label：指定输入项的文字描述信息
         注意：label和for属性一般会和input的id属性值对应。
         如果对应了，则点击label区域会让input输入框获取焦点。
-->
<label for="userName">用户名：</label>
<input id="userName" />
CavenWang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
'/',‘\\’与‘\’的区别
a1111h的博客
08-17 3万+
‘/’,‘//’与‘\’作用 ‘/’,‘//’与‘\’在计算机语言中一般是除法和分割的意思，操作系统常使用他们来分割不同级别的目录 ‘/’与‘\’区别 ‘/’,与‘\’最常见于文件路径（指文件存储的位置）和网址中如：C:\Users\del\Desktop\1.zip，C:/Users/el/Desktop/1.zip和https://blog.csdn.net/a1111h C:\U...
C++基础知识之 【. / :: /：/ ->】的区别
机器学习算法与Python学习
04-26 3187
面试官写了个双冒号::问我这是什么语法？Java中有这玩意？
weixin_45378258的博客
08-31 294
一：简洁 二：方法引用 三：Optional 可选值 一：简洁 方法引用分为三种，方法引用通过一对双冒号:: 来表示，方法引用是一种函数式接口的另一种书写方式 静态方法引用，通过类名::静态方法名， 如 Integer::parseInt 实例方法引用，通过实例对象::实例方法，如 str::substring 构造方法引用，通过类名::new， 如 User::new 二：方法引用 publicfinalclassInteger{ ...
斜杠认识"//" '\' '/'
IPSG
05-08 4万+
1程序读入绝对路径 windows系统文件夹路径C:\Users\Public ,以左斜杠分层文件夹；但是当在程序中赋值给string类型变量后查看却是：C:UsersPublic 因此在程序读入路径时需要的是单右斜杠/ 或者双左斜杠\\ C:\\Users\\Public C:/Users/Public 补充：在UNIX或类UNIX系统中，斜杠/用来表示根目录，也用来分隔目录，比如/User...
约束里“：=”和“：/”傻傻分不清楚？今天彻底弄清！
weixin_48573306的博客
01-17 1万+
在SystemVerilog约束之中，有两个点常常让初学者混淆搞不清楚，或者当时记住了后面不用又忘了。今天jerry就专门来侃侃这两个点，让初学者们想忘也忘不了，全部拿下！ 这两个点就是权重分布的两种写法“：=”和“：/”。 如下面这段代码，这jerry_face_score和tom_face_score两个变量约束都应该是多少呢？ 对于初学者是不是有点晕？这两个“：=”“：/”什么区别呢？到底左边是权重还是右边是权重呢？大家思考一会，可以看下如下解释这段代码什么含义，我们的思考流程是这样的： 首先大家一
html中表单提交的实现
09-22
表单提交是常见的一种操作，这篇文章主要介绍了html中表单提交的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纸箱预订表单HTML模板
04-08
纸箱预订表单HTML模板是一款简洁的客户信息填写表单网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
HTML 表单组件实例代码
12-14
HTML 表单用于搜集不同类型的用户输入。下文通过代码给大家分享html 表单... 如果要给服务端提交数据 表单中的组件必须有name和value属性 用于给服务端获取数据 --> 输入名称:<input type="text" name="user" v
深入理解html表单输入监听
09-28
下面小编就为大家带来一篇深入理解html表单输入监听。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML制作表单ppt课件.ppt
11-15
HTML 表单是 Web 开发中非常重要的一部分，用于和用户进行交互，收集用户输入的数据，并将其提交给服务器端进行处理。在本节中，我们将详细介绍 HTML 表单的概念、作用、工作机制、定义方式、表单控件标记、提交...
/?、//、/'……等等是一个字符
07-30 1万+
在使用字符串的过程中，我们经常会用到转义字符，如’/?‘、‘//’、‘/'’……等等。对字符串中的转义字符进行操作时，有可能会误认为这是两个字符，需要我们根据转义的定义，将这两个字符转换为一个字符。其实完全不需要，因为对字符串进行操作时，计算机自动地将它们识别为一个字符。 #include "stdio.h" int my_print_str (char* strPrnt) { in...
C++中的.和::和：和->的区别
weixin_30393907的博客
09-04 1545
在学习C++的过程中我们经常会用到.和::和：和->，在此整理一下这些常用符号的区别。 1、A.B则A为对象或者结构体； 2、A->B则A为指针，->是成员提取，A->B是提取A中的成员B，A只能是指向类、结构、联合的指针； 3、::是作用域运算符，A::B表示作用域A中的名称B，A可以是名字空间、类、结构； 4、：一般用来表示继承...
HTML 标签 <!-- .... -->
潇笙
06-26 7235
注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 类似C语言中的/* .... */ 有助于您在以后的时间对代码的编辑。
html(部分--表单)
boude的博客
10-29 600
html基本语法–表单 表单-具体可可理解为在网页中可进行输入数据的一个单元 具体表现及示例 <!-- 表单 <form><form/> 初始定义 < input > type="type"输入类型 文本 size=""表格长度 value=""初始值 name=" "键 向服务器提交信息 id=""标志( 唯一 ) placeholder=
HTML中详述jQuery中的“$()”
zzu957的博客
07-19 2375
jQuery对象 jQuery对象：通过jQuery库自带的方法获取页面DOM元素的对象叫做jQuery对象，保存jQuery 对象的变量通常以$开头：                var $userName = $("#user_name");                 $userName.val(“Tom”); jQuery 对象是 jQ
两个简单例子揭示makefile中“=”和“:=”的区别
jasmineal的专栏
04-22 1326
1、“=”       make会将整个makefile展开后，再决定变量的值。也就是说，变量的值将会是整个makefile中最后被指定的值。看例子：             x = foo             y = $(x) bar             x = xyz       在上例中，y的值将会是 xyz bar ，而不是 foo bar 。  2、“:=”
C++中".","->",":"和"::"的区别
silent_F的博客
03-05 1万+
在学习C++的过程中我们经常会用到.和::和：和-&amp;amp;amp;gt;这几个符号，很多新手在遇到这几个符号的时候都会有点弄不清楚，当然包括笔者，这里笔者稍微总结一下这几者的却别 1、`A.B`则A为对象或者结构体； 2、`A-&amp;amp;amp;gt;B`则A为指针，-&amp;amp;amp;gt;是成员提取，A-&amp;amp;amp;gt;B是提取A中的成员B，A只能是指向类、结构、联合的指针； 3、`::`是作
JQuery学习
学习记录和总结
11-08 1万+
JS最广泛使用的插件JQuery的完成使用案例讲解
完美解决 ERROR 1064 (42000): You have an error in your SQL syntax ... near …
热门推荐
程序猿的故事
04-19 37万+
在MySQL命令行使用sql语句进行建表时，MySQL 报错，这个问题之前遇到过几次，但是总是会因为疏忽又相遇，今天把这个问题写出来，加深印象吧。sql语句：CREATE TABLE 'lrs_audit_rule_package'( 'id' BIGINT(20) AUTO_INCREMENT PRIMARY KEY COMMENT '主键', 'package_code' varchar
html中表单居中属性
最新发布
02-07
HTML 表单的居中属性可以通过为表单元素设置 `margin: auto` 并设置其宽度来实现。 例如，可以使用如下代码来居中表单： ``` form { width: 500px; margin: auto; } <!-- 表单元素 --> ``` 这样，表单就...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值