html中input、label、form、textarea、select

表单input:
表单是用来收集信息的,由表单控件(表单元素)、提示信息、表单域构成。

input控件的属性及值:
在这里插入图片描述
除以上属性外,input元素type属性还有一个number属性值,此为仅可以填数字,默认是可以选择或者填写任意数字,但是当type属性为number属性值时,可以使用max和min属性来限制数字的取值范围,input更多属性见HTML5

 <input type="number" min="0"> <!-- min属性限定最小值为0 -->

label标签:

label标签是为input标签服务的,用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

	<label> <!-- 1、直接使用label标签包裹要点击的元素获得焦点 -->姓名:<input type="text"></label><label for="name">姓名:</label> <!-- 2、使用label标签的for属性找input元素获得焦点 --><input id="name" type="text"/>

表单域form:

form元素用于创建一个表单,form中的所有内容都会被提交给服务器;默认form标签中需要有一个submit按钮,如果form里面没有submit按钮,那么可以使用button中type属性为submit的button按钮,这个buttont按钮可能不在form表单中,此时可以给type属性值为submit的button添加form属性,值为form表单的id值,如:

	 <form action="" method="get" name="" id="userform"> <!-- action属性是指定表单提交给后端的地址,method属性设置提交方式,其属性值有post和get,name属性用来给表单域定义名字,用于区分表单域 -->姓名:<input type="text">年龄:<input type="number" min="0"></form><button type="submit" form="userform">提交</button>

文本域textarea:

input元素只能显示一行内容,textarea元素可以显示多行,一般做留言效果使用,常常被称为富文本域。

	 <!-- rows属性限定行数,当行数超过限定后会出现滚动条,cols属性限定的是列数,当超过限定后会换行。 --><textarea cols="20" rows="10"></textarea>

UEditor:
在实际开发中如果需要用到比较复杂的富文本域(类似word的,可以上传视频图片等功能)推荐使用第三方插件,这里推荐大家一款使用的富文本插件:UEditor,使用它可以在网页中实现类似word等编辑,如果想要了解更多及方法请查阅官方文档:http://fex.baidu.com/ueditor/,当然类似的富文本编辑器还有很多,如:CKeditor:https://ckeditor.com/等
在这里插入图片描述
富文本编辑器可以自己做,其原理是利用document的execCommand()方法,这个方法实际开发中很少用,已经废弃,所以一般很少有人了解,如果想要了解更多,可阅读官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜单)select:

	<body><select name="" id=""><optgroup value="" label="分组1"><!-- optgroup标签用来分组 -->><option value="">测试1</option><option value="">测试2</option><option value="">测试3</option></optgroup><optgroup value="" label="分组2"><option value="">选项1</option> <!-- select默认选择第一个option,当给option加selected属性时,则会选中此项显示 --><option value="" selected="selected">选项2</option> <!-- selected属性的selected属性值可以省略,其效果不变--><option value="">选项3</option></optgroup></select></body>

块引用标签:

有的时候会引用名人名言等,此时建议使用引用标签,引用标签分为长引用和短引用两种,长引用标签效果是插入换行和外边距,短引用标签的效果是加上虚拟的引号。

	<blockquote>海上生明月,天涯共此时。</blockquote><!-- 长引用标签 --><q>引号</q><!-- 段引用会给内容加上虚拟的引号,这个引号根本不存在。 -->

在这里插入图片描述
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mac os 显示文件列表命令 ls -a

显示正常文件列表用ls就行了&#xff0c;但是要是想显示隐藏的文件&#xff0c;需要加-a转载于:https://www.cnblogs.com/coolbear/p/3723088.html

html中文本格式化、预格式化、计算机输出标签、address、title、文字方向、著作

文本格式化标签&#xff1a; 预格式化标签pre&#xff1a; 网页中文本默认是显示一行&#xff0c;没有格式&#xff0c;通过<pre></pre>标签包裹会显示默认的格式。 <pre> <!-- 通过pre标签包裹后&#xff0c;会有默认的格式 -->云想衣裳花想容&…

Outlook 与 Outlook Express 的区别

Outlook 与 Outlook Express 的区别是什么? 这两个是两种软件&#xff0c;不要因为同样都有“Outlook”的字样、都可以收发Email&#xff0c;就觉得他们差不多。Outlook Express是一个新闻、邮件软件&#xff0c;属于操作系统自带的组件&#xff0c;附属于操作系统。而Outlook…

配置札记

Spring可以通过指定classpath*:与classpath:前缀加路径的方式从classpath加载文件,如bean的定义文件.classpath*:的出现是为了从多个jar文件中加载相同的文件.classpath:只能加载找到的第一个文件.转载于:https://www.cnblogs.com/angelshelter/p/3725862.html

html5简介、选项输入框、表单元素分组、input新增属性及属性值

HTML5简介: 定义&#xff1a;HTML5号称下一代HTML&#xff0c;html的最新版本&#xff0c;定义了新的标签、css、JavaScript&#xff0c;html5新标签IE9以上版本浏览器才兼容&#xff0c;因此在实际开发中要问老板是否兼容低版本浏览器。 扩展内容&#xff1a;语义化标签、本…

SP2010开发和VS2010专家食谱--第六章节--Web Services和REST(5)--Inserting new contacts through REST...

我们现在知道了我们可以使用REST请求从SharePoint列表获得数据&#xff0c;如何从客户端应用程序添加数据到列表呢&#xff1f;本文中&#xff0c;我们将探讨如何做到。 转载于:https://www.cnblogs.com/crazygolf/p/3856779.html

Linux crontab 定时任务没执行,没收到错误信息邮件

crond 定时任务 没执行&#xff0c;简单的打印日期&#xff0c;reboot 命令 等也没执行成功&#xff08;语法确保没错&#xff09;。捣鼓一整算是有些进展。 centos7 不过这个好像没啥问题吧。。 分割线------------------------------------------------------- 01 最开始就…

Chapter 12 外观模式

外观模式&#xff1a;为子系统中的一组接口提供一个一致的界面&#xff0c;此模式定义了一个高层接口&#xff0c;这个模式使得这一子系统更加容易使用。 外观模式三个阶段&#xff1a; 首先&#xff0c;在设计初期阶段&#xff0c;应该要有意识的将不同的两个层分离。 其次&am…

$@ $# $2 $0 $* Linux 参数使用

命令行参数 运行脚本时传递给脚本的参数称为命令行参数。命令行参数用 $n 表示&#xff0c;例如&#xff0c;$1 表示第一个参数&#xff0c;$2 表示第二个参数&#xff0c;依次类推。 1 $ 表示所有参数&#xff1b;并且所有参数都是独立的&#xff1b;可以用来做 for e…

html5中音频、视频标签、自定义播放器常用属性及方法、全屏操作、新增属性兼容问题

多媒体标签: 音频标签audio: <audio src"音频文件的URL"></audio><!-- audio标签需要controls控件才可以播放音频&#xff0c;controls的属性值可以省略&#xff0c;如果URL为视频格式文件&#xff0c;则只会播放音频 -->html5中通过audio标签实现…

设计模式(17) 访问者模式(VISITOR) C++实现

意图&#xff1a; 表示一个作用于某对象结构的各元素的操作。它使你可以再不改变各元素的类的前提下定义作用于这些元素的新操作。 动机&#xff1a; 之前在学校的最后一个小项目就是做一个编译器&#xff0c;当时使用的就是访问者模式。 在静态分析阶段&#xff0c;将源程序表…

云服务器的主机名是否可以修改??

云服务器的主机名是否可以修改&#xff1f; 1 要是自己建的虚拟机等&#xff0c;这可以随便改&#xff0c;不影响。 2 要是云服务器&#xff0c;阿里云 华为云等&#xff0c;因为是项目上服务器厂商给提供的服务器信息&#xff0c;所以遇到问题需要改主机名时&#xff0c;为了…

CSS简介、行内样式、内部样式、外部样式、注释、引入其他CSS文件

CSS的发展历程&#xff1a; 起初是没有css的&#xff0c;只有少量样式是可以写在html标签中&#xff0c;这样代码格外显得臃肿&#xff0c;此时CSS就出现了。 初识CSS&#xff1a; CSS(Cascading Style Sheets),被称为CSS样式表或者层叠样式表&#xff0c;主要用于设置HTML页…

CISCO PVST+配置和结果验证 per vlan spanning tree(51cto 实验10)

1. 实验线路连接图使用Cisco Packet Tracer6.0 构建拓扑结构图 2. 实验内容(1) 参阅教材中内容&#xff0c;完成PVST的配置内容。(2) 在各台交换机上使用show spanning-tree vlan 10 和show spanning-tree vlan 20 命令&#xff0c;查看根桥信息、各端口角色和各端口状态。(3) …

Linux crond 每分钟,每小时,每天,每周,每月,每年 的表达式写法

每分钟执行 * * * * * 每五分钟执行 */5 * * * * 每小时执行(让分钟取0) 0 * * * * 每2小时执行 0 */2 * * * 每天执行 0 0 * * * 每周执行 0 0 * * 0 每月执行 0 0 1 * * 每年执行 0 0 1 1 *

css中选择器介绍

选择器&#xff1a; 选择器是用来选择目标元素的&#xff0c;选择器分基础选择器和复合选择器及伪类选择器。 基础选择器&#xff1a; 标签名{} /* 1 标签选择器&#xff1a;把某类标签全部选中&#xff0c;如下&#xff1a; */p{font-size:36px;}.类名{} /* 2 类选择器(clas…

使用iometer测试

对国产机进行测试 1.win7上安装测试 下载&#xff1a; 点击打开链接 双击安装即可。 2.ubuntu下配置&#xff1a; OS: Ubuntu 12.04LTS x86_64Kernel: 3.5.0-26-generic下载&#xff1a; 点击打开链接编译安装 unzip iometer-2006_07_27.common-src.zip\?download cd iometer…

http://mirrors.aliyuncs.com/centos/7/extras/x86_64/repodata/repomd.xml: [Errno 12] Timeout on http:/

对于这个点&#xff0c;我的情况是【errno12】&#xff0c; 众多帖子里还是请求404错误居多&#xff0c;情况不一样。我的安装阿里yum配置过程没问题&#xff0c;然后想起之前有过这样&#xff0c;怀疑是dns解析不到mirrors.aliyuncs.com这种地址&#xff0c;所以在dns文件里加…

Android网络课程笔记-----本地音乐播放

1. 本地音乐播放 多媒体&#xff1a; 图片&#xff1a;拍、图片查、图片编辑、摄像、图像处理算法 音频&#xff1a;录、回、编辑、MediaRecorde、MediaPlayer 视频&#xff1a;录、回、编辑、VideoView2. MediaPlayer的使用方法 MediaPlayer的声明周期转载…

CSS设置字体大小、字体粗细、字体风格

font-size:设置字体大小: 该属性值的单位可以使用相对单位和绝对单位&#xff0c;推荐使用px。(浏览器能够识别的最小像素是12px) p{font-size:20px;}常见尺寸单位&#xff1a; font-family:设置字体: 如果需要设置多个字体样式&#xff0c;则属性值可以写多个中间用逗号隔…