第10章 フォーム要素【その2】_html/css_WEB-ITnose

学習ポイント:

1. その他の要素

2. 入力検証

講師: Li Yanhui

この章では主に、ML5 のフォーム内の残りの要素の HT について説明します。 , 次に、フォームの入力検証機能を理解することに重点を置きます。

1.その他の要素

フォーム要素には、ドロップダウン ボックス リストの選択、複数行のテキスト ボックスのテキストエリア、計算結果の出力要素など、説明されていない要素がいくつか残っています。 ...

optgroup要素内の項目を選択複数行のテキストボックスを生成する は計算結果を表します 1. ドロップダウンリストを生成します説明: ドロップダウン リスト要素有効なオプション リストを形成するための サブ要素が少なくとも 1 つ含まれています。 要素には、 プロジェクト要素と という 2 つの子要素が含まれており、いくつかの追加の属性も含まれています。 属性名

要素のグループ選択	option
	textarea
	output
<select name="fruit">　　<option value="1">苹果</option> <br />　　<option value="2">橘子</option> <br />　　<option value="3">香蕉</option></select>
	説明

name 送信時に名前を設定します

無効化

<select name="fruit" size="30" multiple>

<option value="2" selected>橘子</option>

//グループ化には optgroup を使用します。ラベルはグループ名。無効にするとグループ化を無効にできます。

    苹果    <option value="2" selected>橘子</option>    香蕉

<textarea name="content">请留下您的建议！ </textarea>

説明: サイズ変更可能な複数行のテキスト ボックスを生成します。属性は次のとおりです。 Attribute name

ドロップダウンリストを無効化しました ...	複数 複数選択
オートフォーカス	フォーカスを取得
必須ed	認証を選択してください。選択する必要がありますpassに設定後
	//高さを設定して実装 複数選択
//デフォルト優先
	2. 複数行テキスト ボックス
	Description

name

送信時に名前を設定します

フォーム

外部フォームマルチラインテキストボックスは、フォームにフックされます

レディングのみのマルチラインテキストボックスをセットbox

入力文字の最大長を設定autofocusプレースホルダーrowscolswrap 必須

maxlength
フォーカスを取得
入力時にプロンプ​​ト情報を設定します
行数を設定
列数を設定
改行を挿入するかどうかの設定、2つありますタイプ: ソフトとハード
設定には値を入力する必要があります。入力しないと検証に合格しません	//设置行高和列宽，设置插入换行符 <textarea name="content" rows="20" cols="30" wrap="hard"></textarea> 3.计算结果 <form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber"> <input type="number" id="num1"> x <input type="number" id="num2"> <output for="num1 num2" name="res"></form> 解释：output 就是计算两个文本框之间的值，其实就是内嵌了 JavaScript 功能。 二．输入验证 HTML5 对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持的成熟度还不同。在大部分情况下，可能还是要借助 jQuery 等前端库来实现丰富的验证功能和显示效果。 //必须填写一个值 <input type="text" required> //限定在某一个范围内 <input type="number" min="10" max="100"> //使用正则表达式 <input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$"> //禁止表单验证 <form action="http://li.cc" novalidate>