您的位置:首页> 前端教程> HTML教程
文章导航

HTML input search搜索域

2019-1-15 09:20| 作者: admin| 查看: 2875| 评论: 0|来自: 蚂蚁部落

将input元素的type属性值设置为"search"可以创建一个搜索域。

搜索域是HTML5新增,IE9+和其他标准浏览器支持。

从表面上看与普通文本框非常类似,且没有搜索域不影响实现搜索功能。

由此很多朋友认为它可有可无,其实并非如此,任何一种元素的出现肯定有其现实的考量。

搜索域的出现主要有如下两点意义:

(1).更加语义化。

(2).搜索域自身的一些特点给搜索带来了便利。

由于搜索域与普通文本框非常类似,下面首先介绍一下搜索域与文本框相比具有的特点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" name="search"/>
  <br/><br/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092119l3w4owfzowlcu6jf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

默认状态下,从表面上看确实和普通文本框一模一样。

于是就有不少朋友会说搜索域完全是多次一举,唯一的作用就是更加语义化。

其实并不是这样,搜索域具有一些自身的特点,提高了搜索的便利性。

搜索域与普通文本框相比有如下几个特点:

(1).右侧可以出现叉号:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092142o931cb9rmzm891br.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

搜索域输入内容,且获取焦点后,右侧出现叉号,点击此叉号可以删除搜索域内容。

(2).移动端回车按钮编程搜索按钮:

在移动端,如果搜索域获取焦点,那么回车按钮会自动变为搜索按钮。

点击此按钮即可提交表单,也就是进行搜索动作,移动端截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092208sk8yaq9q9aux8n89.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述现象很明显在PC端是无效的,必须在移动端才能观察到。

如果是普通文本框,获取焦点之后,显示一个回车按钮,感兴趣的朋友可以自行测试。

(3).默认显示搜索历史记录:

搜索域默认会保存搜索历史记录,看如下图示:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092231j1z4kx6505zlllxx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面介绍了搜索域与普通文本域的不同点,下面再介绍一下它具有的常见属性。

(1).value:此属性可以规定搜索域的默认值。

(2).size:不推荐使用此属性,建议用CSS的width属性替代。

(3).maxlength:规定搜索域可以输入的最大字符数量。

(4).placeholder(HTML5):规定一段字符串内容,用于提示期望输入的内容。

(5).required(HTML5):规定搜索域必填。

(6).pattern(HTML5):通过正则表达式验证搜索域输入内容的格式。

(7).list(HTML5):规定输入域的datalist,具体参阅HTML datalist选项列表一章节。

(8).form(HTML5):规定搜索域所属的一个或多个表单。

(9).autofocus(HTML5):规定搜索域在页面加载后自动获取焦点。

(10).autocomplete(HTML5):规定搜索域具有自动完成功能。

(11).readonly:规定搜索域只读。

(12).disabled:规定搜索域不可用。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" value="蚂蚁部落" name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092334uu2pwfhuuy625f25.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过value属性设置搜索域的默认值。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" maxlength="10" name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

上述代码通过maxlength属性规定最多只能输入10个字符。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" placeholder="输入关键字" name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

通过placeholder可以规定一段字符串,此字符串不会被提交。

当在搜索域输入内容的时候会被自动清除,目的是为了告知用户期望输入的信息。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" required name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

通过required属性设置搜索域是必填的,否则会报错。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092426ghsmlcq77qmgqsu7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" autofocus autocomplete="on" name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

autofocus属性规定搜索域在页面加载后自动获取焦点,不用填写属性值。

autocomplete具有两个属性值on和off,on规定搜索域列出之前已经填写过的内容,off的功能与之相反。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" readonly value="蚂蚁部落" name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

readonly规定搜索域为只读,不用写属性值,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092502c5ctaq4vcrrzvd0a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

被设置为只读之后,搜索域的内容不能被更改,但是可以被提交。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" disabled value="蚂蚁部落" name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

disabled 规定搜索域为不可用,不用写属性值,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092532e97hku88857um05z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此时搜索域变为灰色不可用状态,值不能被提交。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="tel" pattern="^[a-z]{2,10}" name="search"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

pattern属性值是一个正则表达式,用于规定搜索域值的格式。

上述代码规定,搜索域的值只能是以2-10位小写字母起始的字符串,否则会报错。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092610zkjk5ezg05jfzjl5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表单"/>
</form>
<input type="tel" form="ant" name="search"/>
</body>
</html>

form属性引用所属表单的id,于是,尽管搜索域在<form>之外,但依然是该表单的一部分。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部