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

HTML input url域

2018-10-21 00:29| 作者: admin| 查看: 1324| 评论: 0|来自: 蚂蚁部落

<input>元素将type属性值设置为"url"即可实现url域。

代码实例如下:

[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="url" name="url"/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

上面的代码简单演示了url域的用法,如果输入不是合法url地址会报错。

特别说明:name属性是必须的,否则后台无法接收提交的表单数据。

url域还有其他属性,下面分别做一下介绍:

(1).value:规定url域的默认值,也就是我们所看到的url域中的内容。

(2).size:是一种可视化设计属性,推荐使用css的width属性替代。

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

(4).placeholder(HTML5):提供一种提示,描述所期待的值。

(5).required(HTML5):规定url域内容是必填的。

(6).pattern(HTML5):规定用于验证url域内容格式的正则表达式。

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

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

(9).autofocus(HTML5):规定在页面加载时,域自动地获得焦点。

(10).autocomplete(HTML5):规定url域是否具有自动完成功能。

代码实例:

[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">
  url:<input type="url" maxlength="10" name="url">
  <input type="submit" value="提交表单" />
</form>
</body>
</html>

设置文本域输入输入字符最大个数为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">
  url:<input type="url" required placeholder="输入电话号码" name="url">
  <input type="submit" value="提交表单" />
</form>
</body>
</html>

通过placeholder属性规定url域期望输入的内容;required属性只有一个值"required"(可以省略),它规定url域是必填,内容不能为空,否则会报错。

[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">
  url:<input type="text" 
             placeholder="输入网址" 
             pattern="^http(s)?://([\w-]+\.)+(/?[\w\-./?%&=]*)?$" 
             name="url">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

pattern属性值是一段正则表达式,用来限制url域输入内容的格式,上面的代码使用pattern来规定url域输入内容必须是以http或者https开头的网址,否则会报错。上面的验证提示并不友好,可以参阅HTML5 pattern自定义验证提示一文。

[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">
  url:<input type="url" autocomplete="on" autofocus   name="url">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

autofocus只有一个属性值"autofocus"(可以省略),它规定url域在页面加载后自动获取焦点;autocomplete有两个属性值on和off,on规定url域列出之前已经填写过的内容,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" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表单"/>
</form>
url:<input type="text" form="ant" name="url">
</body>
</html>

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


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML input date calendar下一篇:HTML 视频

最新评论

返回顶部