HTML5 表单属性和input类型

最新推荐文章于 2024-08-02 09:00:00 发布

免费的东西

最新推荐文章于 2024-08-02 09:00:00 发布

阅读量388

点赞数

分类专栏： java 后端文章标签： html5 html 前端

本文链接：https://blog.csdn.net/m0_67394360/article/details/123501700

版权

java 同时被 2 个专栏收录

425 篇文章 19 订阅

订阅专栏

后端

24 篇文章 0 订阅

订阅专栏

一、HTML5 表单属性

autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

实例

让 “First name” input 输入域在页面载入时自动聚焦：

First name:<input type="text" name="fname" autofocus>

min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的标签：date pickers、number 以及 range。

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

效果如下：
在这里插入图片描述

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

在中预定义值:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

效果如下：
在这里插入图片描述

二、HTML5 表单 input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
file

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

语法：

选择你喜欢的颜色: <input type="输入类型" name="favcolor">  #name为定义的元素名

完整例子：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

效果如下：
在这里插入图片描述

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的点击我的Gitee获取。
还有高级java全套视频教程 java进阶架构师视频+资料+代码+面试题！

全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。