HTML5 および CSS3 の基本チュートリアル第 8 版学習ノート第 16-21 章_html/css

第 16 章、フォーム

HTML5 では、新しいフォーム要素、入力タイプと属性、および必須フィールド、電子メールアドレス、URL、カスタムスキーマの組み込み検証が導入されています。

要素:

メールボックス

検索ボックス

---- URL box

次の要素は一部のブラウザでサポートされています:

---- Date

< ;input type="number"> ---- 数値

---- 範囲

＆lt; input type =" color " /＆gt; - グローバル日付と時刻

---- ローカル日付と時刻

---- 月

< input type="time" /> ---- 時間 ---- 週

---- 出力

属性:

novalidateフォーム要素に適用されるH5自動検証機能をオフにする

注: Ryan Seddon の H5F (http://github.com/ryanseddon/H5F) は、H5 フォームの動作を模倣する古いブラウザー用の JS ソリューションを提供できます

Method="get"、フォームが送信された後、データはブラウザのアドレスバーに表示されます。データサイズには制限があります。情報の取得などの公開操作には、フォーム送信後、式データは表示されません

。データは、データベース内のデータの保存、削除、追加などの機密性の高い操作に使用されます。 post

を使用して、フォーム要素を整理します

関連するグループ化には、fieldset 要素を使用できます。要素をまとめて、凡例要素を使用して各グループをグループ化することもできます。フィールドセットには、各グループの目的を説明するタイトルが用意されています。これらの説明には h1 ～ h6 も使用できます。凡例要素を含める必要がある場合は、それがフィールドセットの最初の要素である必要があります。

推奨事項: ラジオボタンの場合は、常に fieldset と凡例を使用することをお勧めします

ラベル label には特別な属性があります: for の値がフォームフィールドの ID 値と同じである場合、ラベル label は次のようになります。明示的に関連しているフィールドと同じです。

for、id、および name 属性の値は任意の値にできますが、複数の単語が含まれる値の場合、for、id はハイフン (-) を使用して単語を区切り、name はアンダースコア (_) を使用します。）接続する。

注: クライアント側の JS 検証が無効になっているか、H5 の新しい属性がサポートされていない可能性があるため、サーバー側の検証を確立する必要があります。

http://html5pattern.com には便利なパターンがたくさんあります

ラジオボタンを作成します

ラジオボタンの同じグループの input 要素の name 属性は同じである必要があり、type="radio"

チェックボックス

チェックボックスの同じグループ内の input 要素の name 属性は同じでなければなりません (type="checkbox")

選択ボックスを作成します

1. 選択ボックスを作成します

select 要素を使用します。 size=n は選択ボックスの高さを表し、行の高さは multiple または multiple="multiple" として入力され、訪問者が複数のオプションを選択できるようになります。

オプションを表すには、select 内の option 要素を使用します。オプション要素に「selected」または「selected="selected"」と入力して、オプションがデフォルトで選択されることを指定します。

2. 選択ボックスをグループ化します

同じグループにグループ化された複数のオプション要素には optgroup 要素を使用します。 label 属性はサブメニューのタイトルです。

サイズ属性を追加すると、選択ボックスはリストのようになり、サイズがオプションの数よりも大きい場合は、自動的に選択されるオプションはなくなり、訪問者は空白のスペースをクリックしてすべてを選択できます。オプションは選択されていません

ファイルをアップロードするにはアクセスを許可します

enctype 属性は form 要素で正しく設定され、input type="file" 要素を作成する必要があります

アップロードを許可するフォームの場合、get メソッドは許可されません

非表示に作成するフィールド

input type="hidden"

非表示フィールドはブラウザーには表示されないため、フォームマークアップのどこに表示されても問題ありません。

秘密のフィールドには機密情報を入力しないでください。訪問者はソースコードを表示することで情報を確認できます

送信ボタンを作成します

1. input type="submit"

2. 画像を含む送信ボタンを作成します

input type= "image" src="img.url"

3. テキストと画像を組み合わせた送信ボタンを作成します

button 要素を使用します

<button type="submit" class="btn">    <img src="check.png" width="21" height="21" alt="" />Create Profile</button>

ログイン後にコピー

注: フォームに複数の送信ボタンが必要な場合は、使用しないでください。 button 要素を使用して

<input type="reset"><button type="reset">Reset</button><!-- 都可以对表单进行重置 -->

ログイン後にコピー

フォーム要素を無効にする

フォーム要素を無効にするには、属性 (disabled またはdisabled="disabled") を要素に追加します。

ステータスに基づいてフォームのスタイルを設定する

疑似クラス

属性	概要
accept	ユーザーがアップロードできるファイルの種類を制限します
autocomplete	autocomplete="off" をフォーム要素または特定のフィールドに追加すると、ブラウザーの自動入力の動作
autofocus	ページが読み込まれた後、このフィールドにフォーカスを置きます
複数	複数のメールアドレスの入力、または複数のファイルのアップロードを許可します
list	datalistを入力に接続します
maxlength	テキストボックスは H5 より前にこの属性をサポートしていました
pattern	ユーザーが入力したテキストが送信する前に従う必要があるパターンを定義します
プレースホルダー	テキストボックスのプロンプトテキストに表示されます
必須	このフィールドはフォームを送信する前に入力する必要があります
formnovalidate	送信ボタンに適用されるH5自動検証機能をオフにします

选择器	应用	浏览器支持情况
:focus	获得焦点的字段	IE8+及其他
:checked	选中的单选按钮或复选框	IE9+及其他
:disabled	具有disabled属性的字段	IE9+及其他
:enable	与:disabled相反	IE9+及其他
:required	具有required属性的字段	IE10+、Safari5+及其他
:optional	与:required相反	IE10+、Safari5+及其他
:invalid	其值与pattern属性给出的模式不匹配的字段等非法字段	IE10+、Safari5+及其他
:valid	与:invalid相反	IE10+、Safari5+及其他

第十七章，视频、音频和其他多媒体

视频文件格式

HTML5支持三种视频文件格式：

1、Ogg Theora使用的文件扩展名为.ogg/.ogv，支持的浏览器：Firefox3.5+、Chrome4+、Opera10.5+以及Android版Firefox

2、MP4（H.264）使用的文件扩展名为.mp4/.m4v，支持的浏览器：Safari3.2+，Chrome4-？，IE9+，iOS（Mobile Safari）和Android2.1+，Android版Chrome，Android版Firefox和Opera Mobile11+

3、WebM使用的文件扩展名为.webm，支持的浏览器：Firefox4+、Chrome6+、Opera10.6+、Android2.3+、Android版Chrome、Android版Firefox和OPera Mobile 14

注：开发者至少要准备两种视频格式（MP4，WebM），才能确保获得所有兼容H5的浏览器的支持。

在网页中添加单个视频

使用video元素，

<video src="my-video.ext"></video>

ログイン後にコピー

video属性

属性	描述
src	视屏URL
autoplay	视频可播放时自动播放
controls	添加浏览器为视频设置的默认控件
muted	静音
loop	循环
poster	指定视频加载时所要显示的图像（而不是视频第一帧），接受所需图像的URL
width	视频宽度，默认300
height	视频高度，默认150
preload	告诉浏览器要加载视频内容的多少 none：不加载任何视频 metadata：仅加载视频元数据（长度、尺寸等） auto：让浏览器决定怎么做

为视频添加控件和自动播放

使用controls、autoplay属性

<video src="my-video.ext" controls></video><video src="my-video.ext" autoplay controls> </video>

ログイン後にコピー

为视频指定循环播放和海报图像

使用autoplay、loop、poster属性，最好加上controls，不然会一直循环播放不能暂停，这会让用户非常火大。

<video src="my-video.ext" autoplay loop></video><video src="my-video.ext" poster="paddle-steamer-poster.jpg" controls></video>

ログイン後にコピー

阻止视频预加载

使用preload属性

<video src="my-video.ext" proload="none" controls></video>

ログイン後にコピー

使用多种来源的视频和备用文本

为了获得所有兼容HTML5的浏览器的支持，至少要准备两种视频格式：MP4、WebM

可以使用source元素做到这一点。

一个video元素可以包含任意个source元素。

<body>     <video width="369" height="208" controls>          <source src="paddle-steamer.mp4" type="video/mp4"><!-- 浏览器支持则播放，忽视后面所有文件，否则跳到下一个source-->          <source src="paddle-steamer.webm" type="video/webm><!-- 类推 -->          <p><a href="paddle-steamer.mp4">Download the video</a></p><!-- 在浏览器不支持时显示 -->     </video></body>

ログイン後にコピー

source的属性

名称	描述
src	视屏来源URL
type	用于指定视频类型，帮助浏览器决定是否能播放该属性的值反映的是视频格式，即编解码器，如video/mp4,video/webm,video/ogg
media	用于为视频来源指定CSS3媒体查询，从而为不同屏幕尺寸设备指定不同的视频

音频文件格式

HTML5支持大量不同格式的音频文件格式

1、Ogg Vorbis扩展名.ogg，支持浏览器：Firefox3.5+、Chrome5+、Opera10.5+

2、MP3扩展名.mp3，支持浏览器：Safari5+、Chrome6+、IE9+、iOS

3、WAV扩展名.wav，支持浏览器：Firefox3.6+、Safari5+、Chrome8+、Opera10.5+

4、AAC扩展名.aac，支持浏览器：Safari3+、IE9+、iOS3+和Android2+

5、MP4扩展名.mp4，支持浏览器：Safari3+、Chrome5+、IE9+、iOS3+，Android2+

6、Opus扩展名.opus，支持浏览器：Firefox

对于音频最好的两种格式是：Ogg Vorbis和MP3，可以获得所有支持HTML5的浏览器的支持

在网页中添加带控件的单个音频文件

使用audio元素，用法与video类似

audio元素属性

名称	描述
src	音频文件URL
autoplay	音频可播放时自动播放
controls	添加浏览器默认控件
muted	静音
loop	循环
preload	与video一致

自動再生、ループ、プリロード、および代替コンテンツを提供する複数のビデオソースの操作は、ビデオの操作に似ています

ソース要素の type 属性:

は、ブラウザが特定のファイルを再生できるかどうかを判断するのに役立ちます。オーディオファイルの場合、値は常に audio/ogg、audio/mp3、audio/aac、audio/wav、audio/mp4 を含む audio/format 自体です

代替 Flash を使用してビデオとオーディオを追加します

はいMediaElement.js (http://mediaelementjs.com/)、Video.js (http://www.videojs.com)、JWPlayer (http://longtailvideo.com/jw-player)、Flowplayer (http: //flowplayer.org)、JW Player と Flowplayer の無料バージョンはメディアプレーヤーにロゴを表示します