Heim > Artikel > Web-Frontend > So verwenden Sie HTML5-Formular-Tags, um die Formularvalidierung zu vereinfachen, Datei-Uploads hinzuzufügen und Drag-and-Drop zu integrieren. HTML5-Tutorial-Fähigkeiten
So verwenden Sie HTML5-Formular-Tags, um die Formularvalidierung zu vereinfachen, Datei-Uploads hinzuzufügen und Drag-and-Drop zu integrieren. HTML5-Tutorial-Fähigkeiten
- WBOYOriginal
- 2016-05-16 15:49:291671Durchsuche
Inhalte rund um Formulare in HTML
|
Neues Attribut |
Persönliches Verständnis |
|
Formular |
Vor HTML5 mussten untergeordnete Elemente im Formular in Tags platziert werden. Jetzt können Sie das Formular-Tag für das Tag angeben Kommentar: Diese Funktion löst einige Probleme, auf die wir in der Praxis gestoßen sind. Wenn iframe beispielsweise den asynchronen Bild-Upload simuliert, muss das Bild außerhalb des Formulars geschrieben werden. |
|
Formation formmethod |
Dieses Attribut wird für Schaltflächen (Senden) verwendet, um die Seite zum Senden des Formulars durch Schaltflächen steuerbar zu machen formmethod gibt die Übermittlungsmethode jeder Schaltfläche an |
|
Placehoder |
Dieses Attribut ist sehr nützlich, um Eingabeaufforderungsinformationen im Textfeld anzuzeigen. |
|
Liste |
Das Listenattribut muss zusammen mit der Datenliste verwendet werden, die einem Textfeld entspricht und eine Auswahl simuliert. Es ist ein sehr geeignetes Attribut |
|
Autofokus |
Wird für Textfelder verwendet, um sich aktiv auf nützliche Dinge zu konzentrieren |
|
Eingabeattribut zur kostenlosen Verifizierung hinzufügen, das von verschiedenen Browsern nicht unterstützt wird |
|
|
Tel. |
Für Telefonanrufe |
|
URL |
Bestätigungs-URL |
|
|
E-Mail-Adresse bestätigen |
|
Datum/Uhrzeit |
Überprüfung des Datumstyps, ein Plug-in zur Datumsauswahl wird angezeigt. . . |
|
Nummer |
kann nur Zahlen sein |
|
Bereich |
Kontrollnummernbereich |
|
Farbe |
Farbauswahl, was für eine tolle Sache. . . |
HTML5 hat viele formbezogene Attribute hinzugefügt. Um ehrlich zu sein, sind diese Dinge wirklich durchdacht! ! ! Weitgehend:
Völlig freie Formularvalidierung
Wenn Sie das Kompatibilitätsproblem nicht berücksichtigt haben, würde ich gerne sofort eingreifen, aber wenn Sie erst einmal über das Kompatibilitätsproblem nachdenken, werden Sie große Kopfschmerzen haben! ! !
Denn etwas, das ursprünglich gut war, wird aus historischen Gründen unsere Arbeitsbelastung erhöhen! ! !
Wenn er das Richtige zur falschen Zeit tut, sieht er richtig aus und hat tatsächlich Recht. . . Aber Sie werden feststellen, dass er falsch liegt. . . .
Seitenelemente verbessern
|
项目 |
个人理解 |
|
figure/figcaption |
据说表示页面独立内容，移除后无影响，暂无发现用处.. |
|
details |
该标签有点意思，用于替代js中，元素收起展开功能。 最新ff都不支持……个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开； |
|
mark |
高亮显示，当真语义化 |
|
progress |
屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！ |
|
改良ol |
老夫就没有用过这个主。。。 |
|
…… |
|
Die oben genannten Elemente sind entbehrliche Elemente und es besteht keine Notwendigkeit, auf Details einzugehen. Als nächstes erscheint der Star dieses Artikels:
Datei-API
FileList und Dateiobjekt:
In HTML4 können Sie mit dem Datei-Tag nur eine Datei auswählen, in HTML5 können Sie jedoch nach dem Festlegen des Mehrfachattributs für das Datei-Tag mehrere Dateien auswählen! ! !
Nach der Auswahl wird hier das Dateilistenobjekt erstellt, bei dem es sich um eine Liste von Objekten handelt, die aus Dateien bestehen. Einfach ausgedrückt handelt es sich um ein Dateiarray.
Das Dateiobjekt verfügt über zwei Attribute: Name stellt den Dateinamen dar (ohne Pfad) und lastModifiedDate stellt den Zeitpunkt der letzten Änderung dar
Tatsächlich können wir beim Bearbeiten von Dateien in HTML4 viele lokale Attribute wie die Dateigröße abrufen, aber der böse IE unterstützt dies nicht und hat sich nach IE9 verbessert.
Wenn Sie also vom Client aufgefordert werden, eine zu große Datei hochzuladen, geben Sie bitte auf. . .
Blob-Objekt
stellt binäre Rohdaten dar und bietet eine Slice-Methode für den Zugriff auf Byte-interne Rohdaten. Die Größe stellt die Bytelänge des Blob-Objekts dar, der Typ stellt seinen Mime-Typ dar und wenn der Typ unbekannt ist, wird eine leere Zeichenfolge zurückgegeben.
Komm schon, mach ein einfaches Experiment:
Kopiere den Code
Der Code lautet wie folgt:Über Datei
Drag Tatsächlich habe ich vor dem Einfügen der API auch ein Drag-and-Drop-Plug-In mit jquery geschrieben. .
Einige Dinge, auf die ich bei der Arbeit gestoßen bin [Popup-Fenster] [Drag & Drop] [asynchroner Datei-Upload]
In HTML5 können Bilder und Links standardmäßig per Drag & Drop verschoben werden. Andere Elemente müssen per Drag & Drop auf „draggable="true" gesetzt werden. Ich werde es sofort versuchen.
Code kopieren
Der Code lautet wie folgt:
拖放的例子
< /title><br> <br> </head><br> <body><br> <div id="dragme" draggable="true" style=" width: 200px; border: 1px solid grey; ">请拖放</div><br> <div id="text" style=" width: 200px height: 200px; border: 1px solid grey;"></div><br> <script type="text/javascript"><br> document.ondragover = function (e) {<br> e.preventDefault();<br> };<br> document.ondrop = function (e) { <br> e.preventDefault();<br> };<br> <br> var source = document.getElementById('dragme');<br> var dest = document.getElementById('text');<br> source.addEventListener('dragstart', function (e) {<br> var dt = e.dataTransfer;<br> dt.setData('text/plain', '您好' new Date());<br> } , false);<br> <br> dest.addEventListener('dragend', function (e) {<br> e.preventDefault();<br> }, false);<br> <br> dest.addEventListener( 'drop', Funktion (e) {<br> var dt = e.dataTransfer;<br> var text = dt.getData('text/plain');<br> dest.innerHTML = text;<br> e. stopPropagation();<br> e.preventDefault();<br> return false;<br> }, false);<br> <br> </script><br> </body><br> < ;/html><br>
</div>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535527.jpg"></p>
<p>拖放时候一定要记住，阻止页面默认行为，否则会打开新窗口的，其中以下亦是重点：</p>
<p>1 拖放可使用DataTransfer传递数据,该对象是非常有用的,因为在拖动目标元素时,可能会经过其它元素，我们可以用此传递信息；</p>
<p><strong>API:</strong></p>
<p>Dragstart <span style="COLOR: #ff0000">被拖放元素</span> 开始拖放时</p>
<p>Ziehen Sie <span style="COLOR: #ff0000">被拖放元素</span> 拖放过程中</p>
<p>dragenter <span style="COLOR: #ff0000">拖放过程中鼠标经过的元素</span> 被拖放元素开始进入本元素时</p>
<p>Dragover <span style="COLOR: #ff0000">拖放过程中鼠标经过的元素</span> 本元素内移动</p>
<p>drageleave <span style="COLOR: #ff0000">拖放过程中鼠标经过的元素</span> 离开本元素</p>
<p>drop <span style="COLOR: #ff0000">拖放的目标元素 <span style="COLOR: #000000">拖动的元素放到了本元素中</span></span></p>
<p>dragend 拖放的对象 拖放结束</p>
<p>其实这里是有问题的, 我并未去深入研究从开始拖动到经过各种元素会产生神马情况，这个可以作为二次学习时的重点研究对象.</p>
<p><strong>结语 </strong></p>
<p>html5虽然不懂，虽然见过，但是还是感觉很厉害的样子！ </p></span>
</div></div></span></div></div>
</td>
</tbody>
</table></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="HTML5-Zeichnungsbilder (Teil 1): Probleme mit dem Canvas-Element, die die nächste Generation von Webseiten leiten_html5-Tutorial-Fähigkeiten" href="http://m.php.cn/de/faq/6315.html">HTML5-Zeichnungsbilder (Teil 1): Probleme mit dem Canvas-Element, die die nächste Generation von Webseiten leiten_html5-Tutorial-Fähigkeiten</a></span><span>Nächster Artikel：<a class="dBlack" title="HTML5-Zeichnungsbilder (Teil 1): Probleme mit dem Canvas-Element, die die nächste Generation von Webseiten leiten_html5-Tutorial-Fähigkeiten" href="http://m.php.cn/de/faq/6319.html">HTML5-Zeichnungsbilder (Teil 1): Probleme mit dem Canvas-Element, die die nächste Generation von Webseiten leiten_html5-Tutorial-Fähigkeiten</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348281.html" title="Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite" class="aBlack">Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348372.html" title="Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)" class="aBlack">Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348373.html" title="Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9" class="aBlack">Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348374.html" title="Reguläre Ausdrücke und neue HTML5-Elemente" class="aBlack">Reguläre Ausdrücke und neue HTML5-Elemente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348469.html" title="So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen" class="aBlack">So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
拖放的例子