ホームページ > 記事 > ウェブフロントエンド > HTML5 フォーム タグを使用してフォーム検証を解放し、ファイルのアップロードを追加し、ドラッグ アンド ドロップを統合する_html5 チュートリアル スキルを使用する方法
新しい属性 |
個人的な理解 |
フォーム |
HTML5 より前は、フォームの下位要素をタグ内に配置する必要がありましたが、 タグに form タグを指定できるようになりました。コメント: この関数は、実際に発生したいくつかの問題を解決します。たとえば、iframe が非同期画像アップロードをシミュレートする場合、画像はフォームの外に書き込む必要があります。 |
形成 フォームメソッド |
この属性は、ボタン (送信) でフォーム送信ページを制御できるようにするために使用されます formmethod は各ボタンの送信方法を指定します |
プレースホルダー |
この属性は、テキスト ボックスにプロンプト情報を表示するために使用されます。 。 |
リスト |
list 属性は、テキスト ボックスに相当し、選択をシミュレートする datalist と一緒に使用する必要があります。 |
オートフォーカス |
アクティブにフォーカスを取得するためのテキスト ボックスに使用され、便利なもの |
さまざまなブラウザでサポートされていない入力属性を無料検証に追加します |
|
電話 |
電話の場合 |
url |
確認 URL |
メール |
メールを確認 |
日付/時刻 |
日付タイプの検証、日付選択プラグインが表示されます。 。 。 |
番号 |
は数字のみです |
範囲 |
管理番号範囲 |
カラー |
カラーピッカー、素晴らしいですね。 。 。 |
HTML5 では、フォーム関連の属性が多数追加されています。正直に言うと、これらは本当に考え抜かれたものです。 ! !大部分:
フォーム検証を完全に解放
互換性の問題を考慮していないのであれば、すぐにでも取り組みたいところですが、互換性の問題について考えると、非常に頭が痛くなるでしょう。 ! !
元々は良かったものが歴史的な理由で仕事量が増えるからです! ! !
間違った時に正しいことをしている彼は、正しく見えるし、実際も正しい。 。 。しかし、彼が間違っていることがわかるでしょう。 。 。 。
项目 |
个人理解 |
figure/figcaption |
据说表示页面独立内容,移除后无影响,暂无发现用处.. |
details |
该标签有点意思,用于替代js中,元素收起展开功能。 最新ff都不支持……个人觉得,既然提供了该标签应该提供属性表示上下展开或者左右展开; |
mark |
高亮显示,当真语义化 |
progress |
屌丝们,可以告别gif图片了,也不用div模拟百分比了,与windows区域一致的进度条出现啦,异步文件上传更加完善! |
改良ol |
老夫就没有用过这个主。。。 |
…… |
上記の要素は必須の要素なので、詳しく説明する必要はありません。次に、この記事の主役である
を説明します。FileList とファイル オブジェクト:
HTML4 では、file タグでは 1 つのファイルしか選択できませんが、HTML5 では、file タグに multiple 属性を設定すると、複数のファイルを選択できるようになります。 ! !
選択すると、ここで filelist オブジェクトが形成されます。これは、簡単に言えば、ファイルで構成されるオブジェクトのリストです。
ファイル オブジェクトには 2 つの属性があり、name はファイル名 (パスを除く) を表し、lastModifiedDate は最終変更時刻を表します
実際、HTML4 でファイルを操作すると、ファイルサイズなど多くのローカル属性を取得できますが、邪悪な IE はそれをサポートしておらず、IE9 以降は改善されました。
したがって、クライアントが大きすぎるファイルをアップロードするように求めた場合は、あきらめてください。 。 。
Blob オブジェクト
はバイナリ生データを表し、バイト内部生データにアクセスするためのスライス メソッドを提供します。サイズは BLOB オブジェクトのバイト長を表し、タイプはその MIME タイプを表し、タイプが不明な場合は空の文字列が返されます。
さあ、簡単な実験をしてみましょう:
ff で画像を選択したら、それを送信し、ブレークポイントを設定して見てみましょう:
ファイルの主人公が表示されます。それは彼です。その属性を出力して確認してみましょう:
本当にすべてが揃っています!ただし、このプロパティを使用してできることはたくさんあります。 。 。 IE7 と 8 を見てみましょう:
視聴者の皆様、私はこの属性をまったく持っていないので、すべてが万能です。 。 。
ところで、IE ブラウザのデバッグは非常に面倒だと思いますが、ff の firebug や Google 独自のプラグインなど、何か良い IE 開発プラグインはありますか? ?
FIleReader インターフェース
ファイルリーダー インターフェイスは、ファイルをメモリに読み込むことができます。これにより、画像を快適にプレビューできますが、その有用性はそれを超えています。
ファイルリーダーの 4 つのメソッド:
readAsBinaryString はファイルをバイナリ コードとして読み取ります。通常はデータをバックエンドに渡します。
readAsText はファイルをテキストとして読み取ります - テキストの内容を読み取ります。readAsURL はファイルを DataURL として読み取ります (通常は小さなファイル、画像、または HTML)。
ファイルが大きすぎて待ち時間が非常に長いため、abort は読み取りを中断します
ファイルリーダーインターフェースイベント:
読み取り割り込みトリガーを中止します
読み取りが失敗したときにトリガーされるエラーonloadstart は読み取り開始時にトリガーされます。
読み込み中です
読み込みが成功すると onload がトリガーされます。
onloadend は、成功または失敗に関係なく、読み取りの完了後にトリガーされます。
練習せずに話すだけでは不十分です。ここで少し実験してみましょう:
コードをコピーします
仕事中に遭遇したいくつかのこと [ポップアップ ウィンドウ] [ドラッグ アンド ドロップ] [非同期ファイルのアップロード]
しかし、HTML5 への統合の方が確実に優れています。 ! !では、この内容を見てみましょう。 。 。そして、その威力はブラウザ内でのドラッグだけではありません。これは驚くべきことです (画像をドラッグしてアップロードします)
HTML5 では、デフォルトで画像とリンクをドラッグ アンド ドロップできます。ドラッグ アンド ドロップするには、他の要素を draggable="true" に設定する必要があります。早速試してみます。
放任時期は必ず停止し、新しい開口部が開くかどうかを確認するために実行されます。その中で以下が注目です:
1 拖放は DataTransfer 転送データを使用できます。このオブジェクトは常に有用です。実行中に他の要素を通過する可能性があるため、私たちはこの転送情報を使用できます。
API:
dragstart 被拖放元素 開始拖放時間
ドラッグ被拖放元素拖放过中
dragenter 拖放進行中ネズミ标经过的要素 被拖放要素開始開始本元素時
dragover 拖放过中鼠标经过的元素 本元素内移動
drageleave 拖放过中鼠标经过的元素 离开本元素
drop 拖放的目标元素 拖動的元素放了本元素中
dragend 拖放的对象 拖放结束
ただし、ここには問題があり、二次的な重点研究対象となり得る、さまざまな元素を介して神害が発生する可能性について、初期段階からの深い研究をやめていません。
结语
html5 の文件と表作の比較精緻、個人感觉比布局新纪标签有用多了、明天始学习キャンバス、虽然不懂、虽然见过、但是感觉害的样子!