html5基础_3input的用法及相关属性

于 2022-04-30 17:47:07 发布
阅读量285 收藏
点赞数
分类专栏： html5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58451019/article/details/124516082
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<!-- 表单 -->
		文本框<input type="text"> <br/>
		电子邮件框:<input type="email"> <br/>
		搜索框:<input type="search"> <br/>
		电话框:<input type="url"> <br/>
		日期框:<input type="date"> <br/>
		数字:<input type="number"> <br/>
		范围:<input type="range"> <br/>
		颜色:<input type="color"> <br/>
		全局日期和时间:<input type="datetime"> <br/>
		局部日期和时间:<input type="datetime-local"> <br/>
		月:<input type="month"> <br/>
		时间:<input type="time"> <br/>
		周:<input type="week"> <br/>
		输出:<output></output>
		
		<!-- 定义一个最小值为1，最大值为20, 步长为4输入框内容。 -->
		<form action="" method="get">
			请输入<input type="number" name="num" value="15" min="1" max="20" step="3">
			<input type="submit" value="refer">
		</form>
		
		
		
		<!-- range类型使用下面属性来规定对数字类型的限定。 -->
		<!-- value规定默认值
			 min最小
			 max最大
			 会显示出1-30的范围，开始值为15
		 -->
		<form action="" method="get">
			请输入数值：<input type="range" name="rag" value="15" id="" min="1" max="30">
			<input type="image" value="" src="img/R-C.jpg">
		</form>
		
		<form action="" method="get">
			
			请选择或输入时间：<input type="time" value="10:50" step="3">
		
			
		</form>
		
		<form action="" autocomplete="off">
			
			<input type="text" name="" list="citylist" id="">
			<datalist id="citylist">
				
				<option value="beijing">beijing</option>
				<option value="qingdao">qingdao</option>
				
			</datalist>
		</form>
			<form action="">
				<!-- autofucus是自动获取焦点 -->
				<label for="textarea"></label><br>
				<input type="text" name="" id="" autocomplete="">
				<textarea name="" id="" cols="45" rows="5">许可协议具体内容……</textarea> <br>
				<input type="submit" value="同意" autofocus> <br>				
				
				
			</form>
			
			<!-- pattern是和正则方式相似的验证方式 -->
			
			<form action="" method="get">
				请输入邮政编码：
				<input type="text" name="" pattern="[0-9]{6}" title="请输入6位数的邮政编码" id="">
				<input type="submit" value="提交">
			</form>
			
			<form action="" method="get">
				<!-- required是必须输入文本 -->
				<input type="text" name="" id="" required>
				<input type="submit" value="提交">
			</form>
			
			<script>
				
				window.onload = function(){
					a = parseInt(prompt("请输入第1个数字。", 8));
					b = parseInt(prompt("请输入第2个数字。", 4));
					document.forms["form"]["result"].value = a*b;
				}
				
			</script>
			<form action="" method="get" name="form">
				两数的乘积为：
				<output name="result"></output>
			</form>
	</body>
</html>

Junju_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5中input常用属性,input 有哪些属性
weixin_27531501的博客
06-04 3429
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。参数name：同样是表示的该文本输入框名称。参数size：输入框的长度大小。参数maxle...
HTML5 input属性
bzzb_的博客
04-09 3148
1.value 属性 value 属性规定输入字段的初始值 2.readonly属性 readonly属性规定输入字段为只读 3.disabled属性 disabled 属性规定输入字段是禁用的。 被禁用的元素是不可用和不可点击的。 被禁用的元素不会被提交。 disabled 属性不需要值。它等同于 disabled=“disabled”。 4.size 属性 size 属性规定输入字段的尺寸（以...
html5的input类型和所有属性详解
每天都记录一点点！
08-11 1万+
一直以来只知道HTML5中的input标签type属性的属性值有很多，但具体并没有很清楚，这段时间做了个汇总，方便以后使用，也做个知识储备！ 在重点介绍type之前，先总结一下input标签的属性： type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = "text"。具体它有那些值，我们后面再讨论。required：标记一个字段是否为必须。如
input的title属性
热门推荐
xclsky的博客
12-20 2万+
1 input 有title属性。该属性是显示该控件的title值。也可以理解为在控件的前面显示title的值。一般用在输入框较多。当鼠标放在输入框前时。会自动的显示title的值。 如：
前端——HTML5之input属性
Searchin_R的博客
09-25 1421
各大网页都要用到输入框，用以提交各类信息。这些功能大部分都是由html中的input来完成的。H中新增段了input属性，这里总结一下input的几种使用类型。 1、url url类型用于包含url地址的输入域，或者说，用于应该包含url地址的输入域，它在提交表单的时候会自动验证url域的值。 语法实例： index：&lt;input type="url"name=“user_url”/...
css3-form-validate_HTML5_CSS3源码_
10-03
标题中的“css3-form-validate_HTML5_CSS3源码”表明这是一个关于使用HTML5和CSS3进行表单验证的项目，其中可能包含实现各种动画效果的源代码。描述中提到的“Pack up animation effects of CSS 3 forms the special...
Html_input
03-30
在本教程中，我们将深入探讨`<input>`标签的各种属性、类型及其在实际应用中的作用。 1. **输入类型（type属性）**： `<input>`标签的`type`属性定义了输入字段的类型，如文本、密码、复选框、单选按钮等。常见的...
HTML5 自动聚焦(autofocus)属性使用介绍
12-13
HTML5的自动聚焦（autofocus）属性是一个非常实用的功能，它使得网页开发者能够在页面加载后无需使用JavaScript就能自动将用户的输入焦点设定到特定的元素上。这一特性大大简化了网页交互的设计，尤其是在那些需要...
HTML5 input placeholder 颜色修改示例
01-21
Chrome支持input=[type=text]占位文本属性，但下列CSS样式却不起作用： CSS 复制代码代码如下: input[placeholder], [placeholder], *[placeholder] { color:red !important; } HTML input语句 复制代码代码如下...
html5基础标签(html5视频标签 html5新标签用法)
09-28
在本文中，我们将深入探讨HTML5的基础标签，特别是视频标签和新引入的结构元素。 首先，HTML5声明变得更加简洁，只需要`<!DOCTYPE html>`即可。在字符编码方面，推荐使用`<meta charset="utf-8">`，以确保网页内容...
input 输入框 title属性
ltk1060669897的博客
05-30 1921
input 输入框 title属性 : 鼠标移动到输入框上，显示输入框中的全部内容 <input type="text" name="" value="" onmouseover="this.title=this.value" placeholder="请输入" maxlength="100">
HTML5/HTML中input标签用法解读
qq_35788269的博客
05-16 1万+
HTML5/HTML中&lt;input&gt;标签用法解读OK！今天博主为小伙伴们介绍的内容是HTML5/HTML中&lt;input&gt;标签的用法，，， ，emmm图文并茂哦！喜欢博主的粉我哦，老铁们，点一波关注！下面正式开始内容的介绍：首先，直观上说&lt;input&gt;标签规定了用户可以在其中输入数据的输入字段！&lt;input&gt;元素在&lt;form&gt;元素之中使用的...
HTML5新增input标签属性
qq_44899153的博客
06-21 849
1.新增的type属性值 类型**** 使用示例**** 含义**** email**** <input type="email"> 输入邮箱格式 tel**** <input type="tel"> 输入手机号码格式 url**** <input type="url"> 输入url格式 numb...
html5中关于input用法的改变
u012002840的专栏
03-17 1671
测试环境：Firefox 10.0、Safari 5.1、Opera 11.61， Chrome 14.0.835.202 自己测试的时候都有写在form表单里，有提交按钮验证。因为对博客使用还不是很熟练，发博文的时候只有舍弃submit验证。大家在本地练习的时候可以写上submit验证，看各个浏览器的对这些新增的类型验证的区别。 一、新增的属性和属性值 在HTML5中，大幅度地增加与改
html5-表单和input元素用法
weixin_34124651的博客
09-15 61
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><body> <form action="http://localhost" method="get" tar...
HTML5 INPUT新增属性
12-02 5845
HTML5的input标签新增了很多属性，也是让大家非常兴奋的一件事，用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性，使得html和js的分工更明确了，使用起来十分舒畅。 我们先看下input新增了的属性： 新增属性一：autoconmplete autoconmplete可以赋值为 on 或者 off。当为 on的时候，浏览器能自动存储用户输入的内容。当用户返回到曾经填写
HTML5 input常见新增类型及属性
VisonYH的博客
03-17 3884
1. url类型、email、tel类型 说明：当输入非url、email的字符串时，浏览器会自动提醒。 &lt;form action="/example/html5/demo_form.asp"&gt; &lt;input type="url"&gt; &lt;input type="submit" value="提交"&gt; &lt;/form&
HTML5新增的input属性你知道多少？
丑小鸭变黑天鹅的博客
03-16 1404
HTML5新增的input属性你知道多少？1、必要（Required）属性2、自动对焦（Autofocus）属性3、pattern 属性4、multiple 属性5、min、max 和 step 属性6、 占位符（placeholder属性）7、电子邮件输入8、list 属性9、height 和 width 属性 1、必要（Required）属性 表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性： required 属性适用于以下类型的 &l
HTML5中新增的input类型及其属性
rishonyou的博客
02-22 2万+
HTML5中新增的input类型及其属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括： color 点击时弹出颜色选择器，可以选择任意颜色 number 输入范围内的数字，可以手动输入超出范围的数字，但不能提交 tel 输入电话号码，只有
HTML5新特性：input元素的新增属性与表单处理
本章主要探讨HTML5中input元素的新增属性，以及HTML5表单和文件处理的新特性。在HTML5中，input元素增加了如autocomplete、autofocus和form等新属性，使得表单交互更加便捷和灵活。 在HTML5表单中，`autocomplete`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值