最新のブラウザだけで使うことができる入力部品について見ていきます。

・入力部品の他の種類も見ていきましょう。ただ、次の入力部品に関しては使用条件が厳しく使用頻度もそれほど多くはないのでこんなものもあるんだな〜くらいで覚えておくと後々使いたい時に調べて書いていくことが出来ます。

・まず使用条件ですがユーザーが使うブラウザが最新版であることなので不特定多数の人たちに向けてのWEBサイトでは使われることが少ないです。ただブラウザが最新版であることが前提の場合は使われることがあるので覚えておきましょう

・まず、type属性をcolorに変えると色を入力するための部品でカラーピッカーから色を選ぶことができます。

・具体的には<input type="color">というようにしてあげればカラーの入力部品を作ることができます。

・次に日付を入力するための部品です。クリックするとカレンダーが出てきてそこから選ぶことによって日付を選択できます。

・書き方はtype属性をdateにするだけでいいので<input type="date">と書いてあげます。

・数字を入力するための部品も用意されています。これは数字だけを受け付けるというもので数字以外の全角文字や英字を入れようとしても弾かれてしまいます

・type属性をnumberにしてあげることで書くことが出来るので<input type="number">というように書いてあげましょう。

・最後にスライダーを作るための部品で指定した範囲の数値を直感的に選択するための入力部品です。

・type属性をrangeにしてあげると書くことが出来るので<input type="range">というように書いていきましょう。

-広告-

楽天で購入

楽天で購入