超级实习生计划学习打卡—HTML5新增表单控件属性

最新推荐文章于 2024-06-16 09:00:57 发布

xixi不是溪

最新推荐文章于 2024-06-16 09:00:57 发布

阅读量199

点赞数

文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_32424432/article/details/125059841

版权

HTML5新增表单控件属性

HTMML5新增表单标签主要针对input的type属性值，具体属性值描述如下：

1. email

email属性指的是邮箱地址，可以自动校验

<input type="email">

2. date、month、week、time、datetime

日期选择：date：选取年月日。month：选取年月。week：选择周和年。time：选取时间。datetime：选取时间、年月日。

<input type="date | month | week | time | datetime">

3. url

url属性可使输入框内输入http地址，可自动校验。

<input type="url">

4. range

range是用作滑块标签属性，必须输入一定范围内的数值。

<input type="range">

5. number

number属性使表单只能输入数字，表单通过min、max属性可以设置最小最大值。

<input type="number" min="0" max="3">

6. tel

tel限制输入框内的值为正确的电话号码格式

<input type="tel">

7. search

search用作搜索框，应用非常广泛，与text的区别是有值的时候会有清空按钮

<input type="search">

8. HTML5新增的表单控件属性案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单作业1</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #00CCFF;
    }
    form {
      width: 500px;
      height: 600px;
      margin: 0 auto;
      background-color: #fff;
      padding: 25px;
      margin-top: 10px;
    }
    h1 {
      color: #FA9C00;
      margin-bottom: 6px;
    }
    h3 {
      margin-bottom: 12px;
    }
    input {
      width: 500px;
      box-sizing: border-box;
      padding: 16px;
      margin-bottom: 15px;
      font-size: 14px;
    }
    textarea {
      width: 500px;
      box-sizing: border-box;
      padding: 16px;
      margin-bottom: 15px;
      font-size: 14px;
      resize: none;
    }
    input:last-of-type {
      margin-top: 10px;
      color: #fff;
      background-color: #00CCFF;
      border: none;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <form action="">
    <h1>Quick Contanct</h1>
    <h3>Contact us today,and get reply with in 24 hours!</h3>
    <input type="name" placeholder="Your Name" autofocus required>
    <input type="email" placeholder="Your Email Address" required>
    <input type="tel" name="tel" id="tel" placeholder="Phone number" required>
    <input type="url" name="url" id="url" placeholder="Your web site start width http://" required>
    <!-- <input type="t"> -->
    <textarea name="" id="" cols="60" rows="7" placeholder="Type Your Message Here..."></textarea>
    <input type="submit" name="sub" id="sub" value="Submit">
  </form>
</body>
</html>

xixi不是溪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
超级实习生计划学习打卡—HTML5新增表单控件属性

HTML5新增表单控件属性HTMML5新增表单标签主要针对input的type属性值，具体属性值描述如下：1. emailemail属性指的是邮箱地址，可以自动校验<input type="email">2. date、month、week、time、datetime日期选择：date：选取年月日。month：选取年月。week：选择周和年。time：选取时间。datetime：选取时间、年月日。<input type="date | month | we
复制链接

扫一扫