input元素属性2

1.email类型<input type="email">

email类型的input元素是一种专门用于输入E-mail地址的文本输入框，用来检验email输入框的内容是符合E-mail邮件地址格式；如果不符合提示错误

2.url类型<input type="url">

url类型的input元素是一种用于输入url地址的文本框。如果所输入的内容时url地址格式的文本，则提交数据到服务器；如果输入的值不符合url地址格式，则不允许提交，并有信息提示

3.tel类型<input type="tel">

tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此tel类型通常会和pattern属性配合使用。

4.searhc类型<input type="search">

search类型是一种专门用于输入搜索关键词的文本框，它会自动记录一些字符，在用户输入内容后其右侧会附带一个删除图标，单击这个图标按钮可清除内容

5.color类型<input type="color">

color类型用于提供颜色的文本框，用于实现一个rgb的颜色输入，其基本形式就#rrggbb，默认值为#000000，通过value属性值可以更改颜色。color类型文本框，

可以快速打开恰色器面板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <form action="#" method="get">
请输入您的邮箱:
<input type="email" name="formmail"><br>
请输入个人网址：
<input type="url" name="user_url"><br>
请输入电话号码：
<input type="tel"name="telphone" pattern="^\d{11}$"><br>
请输入搜索关键词
<input type="search"name="searcchinfo"><br>
请选取一种颜色：
<input type="color" name="color1">
<input type="color" name="color2" value="#ff3e96">
<input type="submit"value="提交">

   </form>
</body>
</html>

 

 

 6.number类型<input type="number">

number 类型的 input 元素用于提供输入数值的文本框。在提交表单时，会自动检查该输
入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错
误提示。
number 类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的
数字间隔或默认值等

value：指定输入框的默认值。
max：指定输入框可以接受的最大的输入值。
min：指定输入框可以接受的最小的输入值。
step：输入域合法的间隔，如果不设置，默认值是 1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <form action="#" method="get">
请输入数值：
<input type="number" name="number1"value="1"min="1"max="20"step="4">

   </form>
</body>
</html>

 

 7.range 类型<input type="tange"/>
range 类型的 input 元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条
它的常用属性与 number 类型一样，通过 min 属性和 max 属性，可以设置最小值与最大值，
通过 step 属性指定每次滑动的步幅。

8.Date pickers 类型<input type=“date, month, week.../>
Date pickers 类型是指时间日期类型，HTML5 中提供了多个可供选取日期和时间的输入
类型，用于验证输入的日期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <form action="#" method="get">
<input type="data">
<input type="month"><br>
<input type="week"><br>
<input type="time"><br>
<input type="datetime"><br>
<input type="datetime-local"><br>
<input type="submit" value="提交">


   </form>
</body>
</html>

 

posted @ 2021-12-11 20:46  しっ  阅读(260)  评论(0)    收藏  举报