了解HTML表单之form元素

时间：2022-08-30 18:50:57

前面的话

　　表单是网页与用户的交互工具，由一个<form>元素作为容器构成，封装其他任何数量的表单控件，还有其他任何<body>元素里可用的标签

　　表单能够包含<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表单控件元素

　　[注意]表单里嵌套表单是不允许的

form元素

　　form元素有accept-charset、action、autocomplete、enctype、method、name、novalidate、target共8个属性，其中action和name属性为必需项

表单名称

　　name属性规定表单名称，如果name="test"，则Javascript可以使用document.forms.test来获取该表单

<form method="get" action="form.php" name="test"></form>

<script>

    var oForm = document.forms.test;

    console.log(oForm.method);//get

</script>

字符集

　　accept-charset 属性是一个空格分隔的字符集列表，规定了服务器处理表单数据所接受的字符集。accept-charset 属性允许指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表单中的数据。该属性的值是用引号包含字符集名称列表。如果可接受字符集与用户所使用的字符即不相匹配的话，浏览器可以选择忽略表单或是将该表单区别对待。此属性的默认值是 "unknown"，表示表单的字符集与包含表单的文档的字符集相同。在之前版本的HTML中，不同的字符编码可以用空格或逗号分隔。在HTML5中，只有空格可以允许作为分隔符

提交地址

　　action属性规定提交表单时，向何处发送表单数据；如果忽略这个属性，表单会重定向到表单所在的URL。这个值可以被 <button> 或者 <input> 元素中的 formaction属性重载(覆盖)

打开方式

　　target属性规定在何处打开action URL。共5个值_blank、_self、_parent、_top、framename。

　　关于target属性的使用移步至此

数据编码

　　enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。大多数情况下该属性不需要设置。这个值可以被 <button> 或者 <input> 元素中的 formenctype属性重载(覆盖)。当 method属性值为 post时， enctype是提交form给服务器的内容的 MIME 类型 。可能的取值有:

　　application/x-www-form-urlencoded 　　在发送前编码所有字符（默认）

　　multipart/form-data 　　　　　　　　   不对字符编码。在使用包含文件上传控件的表单时，必须使用该值

　　text/plain 　　　　　　　　　　　　      空格转换为 "+" 加号，但不对特殊字符编码

数据发送

　　表单可以用两种方式(method)发送数据：GET和POST，默认为GET方法。这个值可以被 <button> 或者 <input> 元素中的 formmethod属性重载(覆盖)

POST方法
　　如果采用POST方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与action属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器

　　在服务器端，一旦POST样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数

【应用场景】

　　[1]大数据处理，因为POST方法相比GET方法而言，处理更多字段

　　[2]安全数据，因为GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录；而POST方法则没有这方面的漏洞

GET方法

　　如果采用GET方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的action URL之后。这两者之间用问号进行分隔。

【应用场景】

　　[1]获得最佳表单传输性能，因为GET发送只有少数简单字段

　　[2]简单处理，因为GET方法无需处理编码解码方法

　　[3]传参处理，因为GET方法允许把表单的参数包括进来作为 URL 的一部分

<h3>get方法</h3>

<form method="get" action="form.php" target = "_blank">

    <p><label>x:<input name="x"></label></p>

    <p><label>y:<input name="y"></label></p>

    <p><button type="submit">Submit</button></p>

</form>

<a title="form.php?x=28&y=66" href="form.php?x=28&amp;y=66">a标签传参</a>

<h3>post方法</h3>

<form method="post" action="form.php"  target = "_blank">

    <p><label>x:<input name="x"></label></p>

    <p><label>y:<input name="y"></label></p>

    <p><button type="submit">Submit</button></p>

</form>    
//GET方法的URL显示为： http://127.0.0.1/form.php?x=1&y=2

//POST方法的URL显示为：http://127.0.0.1/form.php

<p>

<?php

if(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){

    echo "x: " .$_REQUEST["x"] ."<br>";

    echo "y: " .$_REQUEST["y"];

}

?>

</p>

自动完成

　　autocomplete是HTML5新增的一个属性，规定表单是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项

　　[注意]IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

<form autocomplete="on | off"> //该属性默认为on，当设置为off时，规定禁用自动完成功能
<button id="btn1">打开自动完成</button>

<button id="btn2">关闭自动完成</button>

<form method="get" action="#" name="test">

    <p><label>x:<input name="x"></label></p>

    <p><label>y:<input name="y"></label></p>

    <p><button type="submit">Submit</button></p>

</form>

<script>

var oForm = document.forms.test;

btn1.onclick = function(){

    oForm.autocomplete = 'on';

};

btn2.onclick = function(){

    oForm.autocomplete = 'off';

};

</script>

表单验证

　　novalidate是HTML5新增的一个属性，规定当提交表单时不对其进行验证

　　[注意]IE9-不支持

<button id="btn1">打开验证</button>

<button id="btn2">关闭验证</button>

<form method="get" action="#" name="test">

    E-mail: <input type="email" name="user_email" />

    <input type="submit" />

</form>

<script>

var oForm = document.forms.test;

btn1.onclick = function(){

    oForm.removeAttribute('novalidate');

};

btn2.onclick = function(){

    oForm.setAttribute('novalidate','');

};

</script>

了解HTML表单之form元素的更多相关文章

  1. 表单组件 form fastadmin（生成表单元素）

    Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...

  2. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  3. &lbrack;转载&rsqb;WebBrowser控件表单（form）的自动填写和提交

    话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这个ActiveX控件了.这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢). ...

  4. 表单插件——form

    表单插件——form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下: $(form). a ...

  5. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  6. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  7. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  8. 2016&sol;2&sol;25 1、&lt&semi;表单验证&lt&semi;form&gt&semi;&lt&semi;&sol;form&gt&semi; 2、正则表达式 3、事件

    1.<表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电 ...

  9. 如何disabled禁用所有表单input输入框元素

    转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...

随机推荐

  1. 【Debian】非法关机后无法联网 connect&colon; network is unreachable

    某一天,突然发现无法ssh登录虚拟机内的debian系统,一直认为是ssh的问题,然后无意间ping了ping百度,发现原来是debian系统没有联网....囧 首先,是虚拟机的网络设置检查. 打开V ...

  2. HTTP 方法：GET 对比 POST

    什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客户机与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用程 ...

  3. html学习：插入优酷视频

    第31期 读反心灵鸡汤 认清自己 擦,为什么不行??? <p>第31期 读反心灵鸡汤 认清自己</p> <div id="youku"> &lt ...

  4. java 字符串split有很多坑，使用时请小心！！

    System.out.println(":ab:cd:ef::".split(":").length);//末尾分隔符全部忽略 System.out.print ...

  5. PHP人民币金额数字转中文大写的函数

    <?php header("Content-Type:text/html;charset=utf-8"); error_reporting(2); function cny( ...

  6. POJ&lowbar;3666&lowbar;Making&lowbar;the&lowbar;Grade&lowbar;&lpar;动态规划&rpar;

    描述 http://poj.org/problem?id=3666 给一串坡的高度,现在要调整某些点,使整个坡单调不降或单调不升.调整的花费为原高度与先高度的差的绝对值,问最小花费(可单增可单降). ...

  7. python for list generate content

    content = [ii for ii in range(50)] This can generate a list content

  8. CreateCompatibleBitmap 需要注意的问题

    不要使用CreateCompatibleDC得到的内存DC作为其参数,应使用真实DC,否则图片不能显示

  9. 【Docker笔记】-开启TCP管理端口

    如果我们通过docker来整合spring cloud项目,可以通过maven-docker插件将构建好的镜像直接推送到docker服务器上,但是生产环境建议关闭该功能,为了安全考虑.开启tcp远程监 ...

  10. MPLAB X IDE调试仿真功能简单入门

    仿真分为硬件仿真和软件仿真,这里的硬件仿真和软件仿真的区别,就不多说了,相信大家都听说过这两个概念. 我这里想给大家介绍的是“Set PC at Cursor”--“设置PC到光标处”这个功能,这个功 ...

相关文章