HTML 5学習ノート4

2783 ワード

10.フォーム要素フォーム要素ユーザーの入力データを取得するためのform表示HTMLフォーム属性:action表示フォーム発行のページmethod表示フォーム提出の要求方式:POSTとGETの2種類があり、デフォルトGET(POSTはフォームコミット、GETはハイパーリンクコミット)enctypeは、ブラウザがサーバに発生したデータに対して採用する符号化フォーマット(ファイルをアップロードする必要がある場合に設定)を表し、3種類のアプリケーション/x-www-form-urlencodedデフォルト符号があり、サーバmultipart/form-dataにファイルをアップロードできません.サーバtext/plainにファイルをアップロードするために使用できません.使用を推奨しません.異なるブラウザは異なるname設定表現名を理解し、プログラムがtargetを呼び出して表票の送信先を設定します:blank,_parent,_self,_top autocomplete設定ブラウザはユーザーが入力したデータを記憶し、自動完了表現を実現し、デフォルトではon自動完了novalidate設定クライアントデータの有効性検査inputはユーザーの入力データを収集するためのコントロール属性を表す:autofocusはカーソルをあるinput要素にフォーカスし、ユーザーにdisabled無効input要素autocompleteを直接入力させ、input要素の自動完了成功能type input要素のタイプを個別に設定します.以下、name定義input要素の名前を参照してください.対応する値valueのデフォルトで表示される値formを直接受信するために、フォーム外の要素と指定したフォームフックをコミット(idを設定する)labelフォーム要素を表す説明ラベルをcssスタイルに設定し、ユーザー体験fieldsetを向上させ、フォーム要素のセットを表すことで、いくつかのフォーム要素を整理することができます.全体legendがfieldset要素を表す説明ラベルを形成してグループに見出しbuttonが提出またはリセットに使用できるフォームボタンtype属性を表す次の3つの値submit提出フォーム内部属性がformのいくつかの属性resetリセットを上書きすることができ、button一般ボタンを初期化する.Javascriptと組み合わせてtextareaを使用して複数行のテキストを入力できるコントロールselectは、固定されたオプションdatalistのセットを提供するために使用される推奨値のセットを定義します.optionは、ユーザーに提供される推奨値のセットを提供します.optgroupは、関連するoption要素のセットを表します.outputは、計算結果を表します.
<form action="" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
	<input type="number" id="num1">*<input type="number" id="num2">=
	<output for="num1 num2" name="res">
	<button>  </button>
</form>

 
inputのtype属性値:buttonはクリック可能なボタン(JavaScriptと使用してスクリプトを起動することが多い)checkbox定義チェックボックスを定義します.file定義入力フィールドと「参照...」ファイルにhidden定義非表示入力フィールドimage定義画像をアップロードするには、コミットボタンpassword定義パスワードフィールドとして使用します.フィールド内の文字は非表示になります.radioはラジオボタンを定義します.resetはリセットボタンを定義します.リセットボタンは、すべてのフォームフィールドを初期値にリセットします.searchは、検索に使用するテキストフィールドを定義します.textデフォルト.ユーザーがテキストを入力できる1行入力フィールドを定義します.デフォルトは20文字です.html 5の新しいプロパティ:color定義カラーピッカー.date定義日付フィールド(calendarコントロール付き)datetime定義日付フィールド(calendarとtimeコントロール付き)datetime-local定義日付フィールド(calendarとtimeコントロール付き)month定義日付フィールドの月(calendarコントロール付き)week定義日付フィールドの週(calendarコントロール付き)time日付フィールドを定義する時、分、秒(timeコントロール付き)email定義e-mailアドレス用のテキストフィールドnumber定義spinnerコントロール付き数値フィールドrange定義sliderコントロール付き数値フィールド.submitはコミットボタンを定義します.送信ボタンは、サーバにデータを送信します.telは、電話番号のテキストフィールドを定義します.urlは、URL用のテキストフィールドを定義します.
入力検証:
HTML 5は検証が粗末で、主にjavascriptとJQueryで行います
<form>
	<input type="text" required> 
	<input type="number" min="10" max="100"> 
	<input type="text" placeholder="     +  " pattern="^[\d]{2,4}\-[\d]{6,8}$"> 
	<button>tijiao</button>
</form>