html5表单重写

喵粮多 發表於 2019-12-7 19:38:00

<h1 style="text-align: center">html5表单重写</h1>
<h2>一、总结</h2>
<h3>一句话总结：</h3>
<h5>表单重写用于在提交按钮上指定表单提交的各种信息，比如action</h5>
<input type="submit" value="提交到地址1" formaction="L3_02.html">
 
<h3>1、表单重写实例（更改表单的action）？</h3>
<h5><input type="submit" value="提交到地址1" formaction="L3_02.html"></h5>
 
<h3>2、表单提交可以更改哪些属性？</h3>
<h5>formaction  formenctype  formmethod  formnovalidate  formtarget</h5>
<div class="cnblogs_code">
<pre>表单重写属性适用于提交按钮（input的button和直接的button都可以）
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性</pre>
</div>
 
 
<h2>二、html5--3.17 新增的表单重写</h2>
<h3>学习要点</h3>
<ul>
<li>对form元素的属性做一个小结，对个别属性进行一点补充</li>
<li>重点掌握新增的表单重写</li>
</ul>
<h4>form元素的属性小结</h4>
<ul>
<ul>
<li>action/method/enctype/name/accept-charset/accept/target/autocomplete/novalidate</li>
</ul>
</ul>
 
<ul>
<ul>
<li>accept属性：（仅作了解）指定服务器处理表单时所能接受的数据形态，一般默认即可</li>

</ul>

</ul>

 
<ul>
<ul>
<li>accept-charset: （仅作了解）指定表单处理数据时所能接受的字符编码</li>

</ul>

</ul>

 
<ul>
<ul>
<li>target属性:指定在何处打开action属性所指定的URL目标</li>

</ul>

</ul>

 
<ul>
<ul>
<li>enctype属性：(了解即可)规定在发送到服务器之前应该如何对表单数据进行编码。</li>

</ul>

</ul>

 
<ul>
<ul>
<ul>
<li>当method设定发送方式为get时，不必设置该属性；</li>

</ul>

</ul>

</ul>
 
<ul>
<ul>
<ul>
<li>当method设定发送方式为post时该属性才有效；</li>

</ul>

</ul>

</ul>
 
<ul>
<ul>
<ul>
<li>默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。</li>

</ul>

</ul>

</ul>
 
<ul>
<ul>
<ul>
<li>当值设为"multipart/form-data"时表示：不对字符编码。在使用包含文件上传控件的表单时（比如当input的type值为file时），必须使用该值。</li>

</ul>

</ul>

</ul>
 
<ul>
<ul>
<ul>
<li>text/plain:空格转换为 "+" 加号，但不对特殊字符编码。</li>

</ul>

</ul>

</ul>
 
<ul>
<ul>
<li>表单的重写：重写 form 元素的某些属性设定。</li>

</ul>

</ul>
表单重写属性适用于提交按钮（input的button和直接的button都可以）
<ul>
<ul>
<li>formaction - 重写表单的 action 属性</li>
<li>formenctype - 重写表单的 enctype 属性</li>
<li>formmethod - 重写表单的 method 属性</li>
<li>formnovalidate - 重写表单的 novalidate 属性</li>
<li>formtarget - 重写表单的 target 属性</li>

</ul>

</ul>
<h4>button元素</h4>
<ul>
<ul>
<li>用来建立一个按钮从功能上来说，与input元素建立的按钮相同</li>

</ul>

</ul>
 
<ul>
<ul>
<li>button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计</li>
<li>不仅可以在表单中使用，还可以在其他块元素和内联元素中使用</li>

</ul>

</ul>
 
<ul>
<li>button元素的属性</li>
<ul>
<li>type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同</li>
<li>name/vlue/disable属性：与input的用法相同</li>
<li>autofocus属性：设置按钮自动获得焦点。</li>
<li>form属性：设定按钮隶属于哪一个或多个表单</li>
<li>formmethod属性：设定表单的提交方式，将覆盖原本的提交方式</li>
<li>formnovalidate属性：设定表单将会覆盖原本的novalidate属性</li>
<li>fomaction属性：指定表单数据发送对象，将覆盖原来的action属性设定</li>
<li>formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定</li>
<li>formtarget属性：将覆盖原本的target属性设定</li>

</ul>

</ul>
重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮
 
<h3>实例</h3>
 <img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171204005007866-2083155264.png" alt="">
<img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171204005142913-1109534628.png" alt="">
 
<div class="cnblogs_code"><img id="code_img_closed_01926f78-6cef-429a-8b1f-63b2c38e85f0" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_01926f78-6cef-429a-8b1f-63b2c38e85f0" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_01926f78-6cef-429a-8b1f-63b2c38e85f0" class="cnblogs_code_hide">
<pre> 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <p style="color:#FF0000">
 8
 9 </p>
10 <form action="L3_01.html" method="get" >
11 用户名：<input type="text" name="name" size="30"><br><br>
12 意见：<textarea name="textarea" id="" cols="30" rows="5" placeholder="请输入您的意见，谢谢！！" style="background: #F0FFFF"></textarea><br>
13 <h2 style="color:#FF0000">表单重写属性适用于提交按钮</h2>
14 <p style="color:#FF0000">
15 formaction - 重写表单的 action 属性<br>
16 formenctype - 重写表单的 enctype 属性<br>
17 formmethod - 重写表单的 method 属性<br>
18 formnovalidate - 重写表单的 novalidate 属性<br>
19 formtarget - 重写表单的 target 属性<br>
20 </p>
21 <br><input type="submit" value="提交到地址1" formaction="L3_02.html"> <input type="reset"><br>
22 <br><input type="submit" value="提交到地址2" formaction="L3_06.html"> <input type="reset"><br>
23 <br><input type="submit" value="提交到地址3" formaction="L3_07.html"> <input type="reset"><br>
24 
28
29 </form>
30 <body>
31 </body>
32 </html></pre>
</div>
View Code</div>
 
<div> </div>

</div>
<div id="MySignature" role="contentinfo">
<div id="fry_added_part">
<div class="fry_website">
 <div class="fry_website" style="color:#3c8dbc;padding: 10px 0;display:none;">
 我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
 【读书编程笔记】fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
 </div>
 <div class="copyright" style="color: red;padding-bottom: 10px;">
 版权申明：欢迎转载，但请注明出处
 <div style="font-size: 12px">一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。</div>
 </div>
 <div id="fry_know_friends" style="color: red;padding-bottom: 10px;font-size: 22px;">
 <div style="display:none;"></div>
 <div style="display:none;">在校每年国奖、每年专业第一，加拿大留学，先后工作于华东师范大学和香港教育大学。</div>
 <div style="display:none;">2025-04-30：宅加太忙，特此在网上找女朋友，坐标上海，非诚勿扰，vx：fan404006308</div>
 </div>
 <div class="copyright" style="color: green;padding-bottom: 10px;">
 录播课资料github地址：https://github.com/fry404006308/fry_course_materials
 </div>
 <div style="display:none;"></div>
</div>
<div class="fry_tech_group" style="color: mediumpurple;">
 <div>
 AI交流资料群：753014672
 </div>
</div>
<div class="fry_recommend">
 <h2>作者相关推荐</h2>
 <div id="fry_recommend" style="padding-bottom: 40px">
 </div>
</div>
<style>
 #fry_added_part .inspiration_content{
 //max-height: 120px;
 overflow: auto;
 margin: 20px 0;
 }
 #fry_added_part .fry_inspiration .simple a{
 margin-right: 25px;
 }
</style>
<div style="display:none;" class="fry_inspiration">
 <div style="color: red;font-size: 20px;text-align: center;" class="title">
 感悟总结
 </div>
 
 
 <div class="detail">
 <div class="url_set">
 <div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/13498246.html"></div>
 
 
 </div>
 <div class="content_set"></div>
 </div>
 
 <div style="display: none;" class="simple">
 <div style="color: #FF9966;margin-bottom: 10px;">其它重要感悟总结</div>
 <div>
 感悟总结200813
 最近心境200830
 最近心境201019
 201218-210205
 </div>
 </div>
</div>
</div> 
来源：https://www.cnblogs.com/Renyi-Fan/p/12003103.html

頁: [1]

琼殿技术论坛's Archiver

html5表单重写