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

HTML form 元素

2018-12-8 17:03| 作者: admin| 查看: 1352| 评论: 0|来自: 蚂蚁部落

当前网站的功能非常强大,除了能够给浏览者展示信息之外,也可以进行交互。

比如最为常见的交互操作,注册会员、跟帖留言或者文章发布等。

form表单实现上述操作是最为常见方式之一,也可以使用其他方式,比如ajax等。

首先看一个代码:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
</head>
<body>
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密码:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陆" />
    <input type="reset" value="重置" />
  </li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170419j898grfr1rq8bi1z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是一个简单的用户登录界面,点击登录按钮会有一个登录动作。

然而上述代码中,点击登录提交按钮没有任何反应,这是因为没有和任何form元素发生关联。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
</head>
<body>
<form>
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密码:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陆" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

在ul的外层嵌套了一个form元素,现在点击提交按钮,可以发现地址栏有明显变化。

form元素的功能初步得以体现,简单的讲,此元素可以生成一个可交互模块,与之相关联的表单元素,比如单选按钮,复选框、单行文本框或者多行文本框等可以向服务器传输数据。

一.产生关联的方式:

(1).使用form元素嵌套其他表单元素。

(2).其他表单元素的for属性与form的id属性值关联。

二.form元素主要属性:

下面介绍一下form元素常用的属性,分别如下:

1.name属性:

此属性可以用来给form元素命名,提供了一种脚本获取form元素的手段。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
<script>
window.onload=function(){
  console.log(document.forms["ant"].id)
}  
</script> 
</head>
<body>
<form name="ant" id="antzone">
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密码:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陆" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170516p66ccc8y8lcclw4k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

也可以使用document.getElementsByName方法获取。

2.action属性:

此属性规定焦点数据提交的目标页面,也就是数据将会发送到哪个文件。

如果不规定或者属性值为#等特殊值,会将数据提交到当前页面。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
<script>
window.onload=function(){
  console.log(document.forms["ant"].id)
  document.getElementsByName
}  
</script> 
</head>
<body>
<form name="ant" action="softwhy.php">
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密码:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陆" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

点击提交按钮可以将表单数据提交到softwhy.php文件。

3.method属性:

此属性规定表单数据提交的方式。

(1).get:默认值,通过url提交数据,点击提交按钮后,可以看到地址栏发生变化,后面会出现键值对,其实就是表单元素的name属性值与对应的value属性值,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170551i44xdne33aaaez3f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

缺点也比较明显,数据量较小,通常不能够超过1k,安全性也不是太好。

(2).post:传输上大小上没有限制,并且安全性良好,不通过url传输。

代码片段如下:

[HTML] 纯文本查看 复制代码
<form method="提交方式">
  <!--表单内容-->
</form>

4.target属性:

此属性规定在何处打开atcion属性规定的url。

代码片段如下:

[HTML] 纯文本查看 复制代码
<form target="_blank|_self|_parent|_top|framename">
  <!--表单内容-->
</form>

属性值功能与<a>元素的target属性值完全相同,不多介绍,

具体参阅HTML <a> 标签一章节。

5.accept-charset属性:

此属性规定表单提交时使用的字符编码。

默认值是保留字符串 "UNKNOWN"(表示编码为包含<form>元素的文档的编码)。

表单提交时使用的字符编码列表,多个字符编码使用空格分隔。

[HTML] 纯文本查看 复制代码
<form accept-charset="character_set">
  <!--表单内容-->
</form>

6.enctype属性:

此属性规定对表单数据进行编码的方式,需要注意,method属性值等于post时有效。

(1).application/x-www-form-urlencoded:默认值,发送前对所有字符进行编码(将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值)。

(2).multipart/form-data:不对字符编码,当使用有文件上传控件的表单时,该值是必需的。

(3).text/plain:将空格转换为 "+" 符号,但不编码特殊字符。

7.autocomplete属性:

此属性是HTML5新增,算是非常人性化的一个举措。

当用户在表单元素键入内容的时候,会根据历史以往的输入自动列出类似于下拉菜单的历史选项。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
</head>
<body>
<form name="ant" autocomplete="on">
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密码:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陆" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170738p0p0nne68p7np18z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

具有两个属性值on与off,on(默认值)表示开启此功能,off表示关闭此功能。

8.novalidate属性:

此属性是HTML5新增,规定表单提交时是否对表单元素数据进行正确性验证。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  text.oninvalid=function(){
    text.setCustomValidity("请输入正确格式的手机号码");
  };
}
</script>
</head>
<body>
<form action="do.php" name="ant" novalidate>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>
</body>
</html>

上述代码不会对输入文本框的数据进行验证,novalidate只有一个属性值"novalidate",可以省略。

特别说明:此属性仅会禁止HTML内置的验证规则,如果自定义的验证规则,此属性无效。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部