学習ポイント:
1. その他の要素
2. 入力検証
講師: Li Yanhui
この章では主に、ML5 のフォーム内の残りの要素の HT について説明します。 , 次に、フォームの入力検証機能を理解することに重点を置きます。
1.その他の要素
フォーム要素には、ドロップダウン ボックス リストの選択、複数行のテキスト ボックスのテキストエリア、計算結果の出力要素など、説明されていない要素がいくつか残っています。 ...
|
要素のグループ選択 | option |
|
| textarea |
|
| output |
|
|
| 1.
|
<select name="fruit"> <option value="1">苹果</option> <br /> <option value="2">橘子</option> <br /> <option value="3">香蕉</option></select> ログイン後にコピー | 説明: |
説明 |
name 送信時に名前を設定します
| ドロップダウンリストを無効化しました ... | 複数 複数選択 |
| オートフォーカス | フォーカスを取得 |
| 必須ed | 認証を選択してください。選択する必要がありますpassに設定後 |
|
| //高さを設定して実装 複数選択 |
| //デフォルト優先 |
| //グループ化には optgroup を使用します。ラベルはグループ名。無効にするとグループ化を無効にできます。
|
| 2.複数行テキスト ボックス |
|
| 説明: サイズ変更可能な複数行のテキスト ボックスを生成します。属性は次のとおりです。
|
Description |
送信時に名前を設定します
フォーム
外部フォームマルチラインテキストボックスは、フォームにフックされます
レディングのみのマルチラインテキストボックスをセットbox
| maxlength | 入力文字の最大長を設定
| autofocus
フォーカスを取得 |
| プレースホルダー
| 入力時にプロンプト情報を設定します |
| rows
行数を設定 |
| cols
列数を設定 |
| wrap
改行を挿入するかどうかの設定、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> ログイン後にコピー
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
