html5 input的一些新类型与属性

最新推荐文章于 2023-01-11 14:57:45 发布

weixin_30439131

最新推荐文章于 2023-01-11 14:57:45 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/komayyy/p/6432671.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>input</title>
</head>
<body>
email:<input type="email" name="email"><br><br>
tel:<input type="tel" name="tel"><br><br>
number:<input type="number" name="number"><br><br>
url:<input type="url" name="url"><br><br>
date选择年月日:<input type="date" name="date"><br><br>
month选择年月:<input type="month" name="month"><br><br>
week选择周:<input type="week" name="week"><br><br>
time选择时间:<input type="time" name="time"><br><br>
datetime选择年月日时间:<input type="datetime" name="datetime"><br><br>
datetime-local选择本地年月日时间:<input type="datetime-local" name="datetime-local"><br><br>
range设置区间:<input type="range" name="range" min="1" max="10"><br><br>
search搜索，输入内容有x小按钮:<input type="search" name="search"><br><br>
color选择颜色:<input type="color" name="color"><br><br>
<!-- autocomplete属性，使form或input拥有自动完成功能，值为on/off -->
<form action="#" method="post" autocomplete="on">
  <input type="text" name="text">
  <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form><br>
<!-- autofocus属性，页面加载时自动获得焦点，适用于所有的input标签 -->
<form action="#" method="post">
  <input type="text" name="text">
  <input type="email" name="email" autofocus="autofocus">
  <input type="submit">
</form><br>
<!-- multiple属性，规定输入域中可选择多个值，适用于email和file -->
<form action="#" method="post">
  <!--file可上传多个文件-->
  <input type="file" name="file" multiple="multiple">
  <!--email中用;或,分隔多个email-->
  <input type="email" name="email" multiple="multiple">
  <input type="submit">
</form><br>
<!-- placeholder属性，输入框的提示性值，适用于text,search,url,tel,email,password -->
<form action="#" method="post">
  <input type="text" name="text" placeholder="请输入您的名字">
  <input type="submit">
</form><br>
<!-- required属性，在提交前做简单判断，适用于text,search,url,tel,email,password,date pickers,number,checkbox,radio,file -->
<form action="#" method="post">
  <input type="text" name="text" required="required">
  <input type="text" name="text" oninvalid="this.setCustomValidity('你要改的提示文本');" required>
  <input type="submit">
</form>
</body>
</html>

新类型与属性，有些在手机端有效果，pc没有明显变化。大家在实际应用中多多测试练习。

转载于:https://www.cnblogs.com/komayyy/p/6432671.html