HTML5 の新しいフォームコントロールとフォーム属性とは何ですか?-H5 チュートリアル-php.cn

HTML5 の新しいフォームコントロールとフォーム属性とは何ですか?

王林

リリース： 2021-03-11 10:42:50

転載

3205 人が閲覧しました

HTML5 の新しいフォームコントロールとフォーム属性とは何ですか?

HTML5 は、インターネットの次世代標準であり、インターネットコンテンツを構築および表示するための言語方法です。インターネットの中核技術の 1 つと考えられています。

HTML5 は、Web の中核となる言語 HTML の仕様です。ユーザーが何らかの手段で Web を閲覧する際に目にするコンテンツは、もともと HTML 形式であり、内部で何らかの技術的な処理を経て、認識可能な形式に変換されます。ブラウザの情報。 HTML5 は以前の HTML4.01 をベースに一定の改良を加えたものであり、技術者が開発プロセス中にこれらの新しい技術を適用することはできませんが、Web サイト開発の技術者はこの技術の新しい機能を認識する必要があります。

新しい入力フォームコントロール:

email: 電子メールテキストボックス、通常のものと変わりません
- 入力時にはメールアドレスではありません。検証は失敗します。
# - モバイル端末のキーボードが変わります。
## - 例: js を使用して現在の値を表示します
## 数値: 数値のみを含めることができる入力ボックス
# - 入力ボックスの最後に 2 つの矢印があります。上の矢印はプラスを表し、下の矢印はマイナスを表します。
カラー: カラーセレクター
# date: 日付 {年、月、日} を表示します
週: 週 {年、月、日、週}# を表示します
## 口: {年、月} の月を表示します
## (無料ビデオチュートリアル:
html ビデオチュートリアル
)

<form>
  <input type="email" />
  <input type="tel" />
  <input type="url" />
  <input type="search" />
  <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->
  <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
  <input type="submit" />
</form>

ログイン後にコピー

新しいフォームの機能と機能
プレースホルダー: 入力ボックスプロンプト情報
- 例: Weibo パスワードボックスプロンプト

autocomplete

- デフォルトはオンで、プロンプト選択をオフにします。

## 必須: このオプションは必須であり、空にすることはできません
## パターン: 通常の検証
- pattern="\d{1,5}"
Formaction は submit で送信アドレスを定義します

<input type="text"
  placeholder="请输入4-16个字符" // 输入框内显示
  autocomplete="off" // 是否记录输入的值
  autofocus // 聚焦
  required // 输入框不能为空
  pattern="\d{1,5}" // 必须输入1到5个数字
 />
//  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验

// 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://www.baidu.com">
  <input type="text">
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>

ログイン後にコピー