選択タグの HTML 読み取り専用
-
<select readonly>属性 -
<select disabled>属性を使用して、HTML のselectタグのreadonly属性をエミュレートする -
pointer-events: none属性を使用して、HTML のselectタグのreadonly属性をエミュレートする - まとめ
HTML、Hyper Text Markup Language は、Web サイトの書式設定に広く使用されています。 また、CSS (カスケーディング スタイル シート) は、書式設定された Web サイトのスタイル設定に使用できます。
以下は、ユーザーとカーソルの動作を制御するために HTML と CSS で使用される属性の一部です。
<select readonly> 属性
<select> は、キーボード、マウス、またはタッチ スクリーンからユーザー入力を取得するために最も一般的に使用される HTML タグです。 通常、<select> を使用すると、ユーザーは 1つ以上のオプションを選択できますが、<select readonly> を使用すると、ユーザーは値を変更するのではなく、表示のみを行うことができます。
readonly 属性は、入力要素が編集不可で読み取り専用であることを指定します。 また、テキスト、URL、電話番号、電子メール、パスワード、日付、月、週、時間、および数値は、readonly でサポートされている形式です。
構文：
<select readonly>
しかし、<select readonly> は、すでに廃止されているため、最近の HTML では有効ではありません。 その代わりに、disabled 属性を使用できます。
<select disabled> 属性を使用して、HTML の select タグの readonly 属性をエミュレートする
disabled 属性は、ドロップダウン リストが無効であることを指定する際に使用されるブール属性です。 disabled を使用すると、要素をクリックおよび使用できなくなり、ユーザーから制御できなくなります。
また、入力フィールドは適用外として表示され、使用する機能が無効になります。
構文：
<select disabled>
より明確なアイデアを得るために、ドロップダウン リストを作成して、例を使用してこの構文を詳しく説明しましょう。
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML disabled Attribute</title>
</head>
<body style="text-align: center;">
<h1 style = "color: brown;"> HTML Select Disabled Attribute </h1><br>
<p style="color: black; font-size: large"> What is your Home Country? </p>
<p style="color: grey"> (Selection of choice is disabled) </p>
<select disabled>
<option value="Sri Lanka">Sri Lanka</option>
<option value="India">India</option>
<option value="Turkey">Turkey</option>
</select>
</body>
</html>
最初に、タイトル HTML disabled Attribute でメタ文字セットを定義して HTML ファイルを開き、<head> を閉じた後にコンテンツを中央に保つようにスタイル設定されたすべての要素で <body> を開きました。
次に、見出しの名前を <h1> と茶色の HTML Select Disabled Attribute として定義しました。 <br> を使用して、見出しの後に改行を入れました。
次に、あなたの母国はどこですか?という質問を定義しました。 <p> を使用し、大きなフォント サイズと黒色を使用します。 その後、灰色のフレーズ (Selection of choice is disabled) を定義しました。
次に、<select disabled> を使用してドロップダウン リストを無効にします。 <select disabled> で無効になっている場合でも、Sri Lanka、Turkey、および India としていくつかの値を定義しています。
結果として、HTML ファイルの最後で、使用されているすべてのタグが閉じられます。
出力によると、無効化されたドロップダウン リストは灰色で、ユーザーが制御できません。 ユーザーは、ドロップダウン リストからオプションをクリックしたり、選択したりすることはできません。 これが <select disabled> 関数の仕組みです。
readonly と disabled の違いは、readonly を使用すると、ユーザーが提供した入力を表示できるようになるのに対して、disabled を使用すると、クリックできない要素がユーザーに提供されることです。
pointer-events: none 属性を使用して、HTML の select タグの readonly 属性をエミュレートする
pointer-events は、<select readonly> の代わりに使用できる別のメソッドです。 readonly でさえ、 pointer-events プロパティと一緒に none を使用する場合、少なくとも表示するユーザーをサポートします。 ユーザーの矢印クリック イベントを無効にします。
全体として、pointer-events プロパティは、マウス イベントへの応答、ホバリング、クリックなどのアクティビティを管理することで、カーソルの反応を制御します。 none 属性を持つ pointer-events は、すべてのクリックを防ぎ、要素上のカーソルの動作を制御します。
構文：
pointer-events: none;
pointer-events が none 属性でどのように動作するかを、Social Media の 2つのリンクを使用した例を通して定義しましょう。 この例では、HTML と CSS ファイルを作成しました。
HTML コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Using none in Pointer Events</title>
</head>
<body>
<p> Social Media </p>
<ul>
<li><a href="https://www.facebook.com">Facebook</a></li>
<li><a href="https://www.whatsapp.com">Whatsapp</a></li>
</ul>
</body>
</html>
上記の HTML コードに従って、最初にドキュメント タイプを HTML として定義し、<head> を開いた後にメタ文字セットを定義しました。 また、href を使用して style.css ファイルをリンクし、タイトルを Using none in Pointer Events と定義しました。
<head> を閉じたら、<body> を開き、Facebook と Whatsapp の 2つのリスト アイテムと関連するリンクを含む Social Media という名前の順序付けられていないリストを作成しました。
style.css コード:
p{
font-size: 40px;
color: blue;
}
li{
font-size: 20px;
color: brown;
}
a[href="https://www.whatsapp.com"]{
pointer-events: none;
}
まず、styles.css で、パラグラフ Social Media を青で 40px のサイズで表示するように定義しました。 また、アイテムのリストは茶色で、フォント サイズは 20px です。
none 属性を持つ pointer-events は、違いを確認するために 1つのソーシャル メディア リンクに適用されます。
上記の出力でわかるように、カーソルを Facebook に移動すると、手のサインが表示されます。 しかし、カーソルをWhatsappに移動すると、矢印記号としてのみ残ります.
この例を通して、pointer-event: none 機能について理解していただければ幸いです。
まとめ
全体として、上記のコンテンツ全体を通して、入力要素へのユーザー アクセスを制限し、それらを選択して指摘することについて説明しました。 他にも多くの方法がありますが、説明したのはほんの一部です。
<select readonly> を使用することでさえ、HTML5 では既に推奨されていない方法です。 それを使用する代わりに、上記の手法を使用して同様の出力を実現できます。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.