ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 入力の新しいタイプ属性の色カラーピッカーのコード例

HTML5 入力の新しいタイプ属性の色カラーピッカーのコード例

青灯夜游
青灯夜游転載
2018-10-09 15:52:384174ブラウズ

type 属性は、入力要素のタイプを指定します。この記事では、HTML5 入力の新しいタイプ属性カラー カラー ピッカーのサンプル コードを詳しく紹介します。興味のある方は、スクリプト ホームのエディターをフォローして、

定義と使用法をご覧ください。 type 属性は、入力要素のタイプを指定します。

注: この属性は必須ではありませんが、常に使用する必要があると考えられます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>color拾取器</title>
</head>
<body>
  <input type="color" id="color">
</body>
<script>
  document.querySelector("#color").onchange = function () {
    document.getElementById(&#39;color&#39;).click(); // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色
    document.body.style.background = this.value;
  }
</script>
</html>
HTML5 入力の新しいタイプ属性の色カラーピッカーのコード例

HTML 5 タイプ属性

属性値

を見てみましょう。

Valuebuttonチェックボックスcolordatedatetime#datetime-local日付フィールドの定義 (カレンダーと時間のコントロールあり)month 日付フィールドの月を定義します (カレンダー コントロールを使用) week 日付フィールドの週を定義します (カレンダー コントロールを使用) ) time日付フィールドの時、分、秒を定義します (時間制御あり)email 電子メール アドレスのテキスト フィールドを定義しますファイルファイル アップロード用の入力フィールドと「参照...」ボタンを定義しますhidden非表示の入力フィールドを定義しますimage画像を送信ボタンとして定義しますnumberスピナー コントロールを使用して数値フィールドを定義します。passwordパスワード フィールドを定義します。フィールド内の文字はマスクされます。 radioラジオ ボタンを定義します。 #rangeスライダー コントロールを使用して数値フィールドを定義します。 resetリセット ボタンを定義します。リセット ボタンを押すと、すべてのフォーム フィールドが初期値にリセットされます。 search検索に使用するテキスト フィールドを定義します。 送信送信ボタンを定義します。送信ボタンはデータをサーバーに送信します。 tel電話番号に使用するテキスト フィールドを定義します。 デフォルト。ユーザーがテキストを入力できる単一行の入力フィールドを定義します。デフォルトは 20 文字です。 URL に使用されるテキスト フィールドを定義します。 #概要
Description
クリック可能なボタンを定義します (スクリプトを起動するために JavaScript で主に使用されます)
チェックボックスを定義します。
カラーピッカーを定義します。
日付フィールドを定義します (カレンダー コントロールを使用)
日付を定義しますフィールド (カレンダーと時間のコントロールあり)
#テキスト
url

以上は、HTML5 入力の新しい type 属性 color color の紹介です。ピックアップの全内容が、皆様の学習のお役に立てば幸いです。関連チュートリアルの詳細については、Html5 ビデオ チュートリアルをご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

HTML5 グラフィック チュートリアル

HTML5オンライン マニュアル

以上がHTML5 入力の新しいタイプ属性の色カラーピッカーのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。