ホームページ > 記事 > ウェブフロントエンド > 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>

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 ビデオチュートリアルをご覧ください。

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

関連記事