HTMLフォーム要素の詳しい解説(パート2)

HTMLフォーム要素の詳しい解説(パート2)

HTML 入力属性

値属性

value 属性は、入力フィールドの初期値を指定します。

<フォームアクション="">
<input type="text" name="name" value="123WORDPRESS.COM">
</フォーム>

読み取り専用属性

readonly 属性は、入力フィールドが読み取り専用 (変更不可) であることを指定します。

<フォームアクション="">
<input type="text" name="name" value="123WORDPRESS.COM" 読み取り専用>
</フォーム>

読み取り専用属性には値は必要ありません。これは readonly="readonly" と同等です。

無効属性

disabled 属性は、入力フィールドが無効であることを指定します。
無効な要素は使用できず、クリックもできません。
無効な要素は送信されません。

<フォームアクション="">
<input type="text" name="name" value="123WORDPRESS.COM" 無効 >
</フォーム>

disabled 属性には値は必要ありません。これは disabled="disabled" と同等です。

サイズ属性

size 属性は、入力フィールドのサイズを文字数で指定します。

<フォームアクション="">
<input type="text" name="name" value="123WORDPRESS.COM" size="40">
</フォーム>

maxlength属性

maxlength 属性は、入力フィールドに許可される最大長を指定します。

<フォームアクション="">
<input type="text" name="name" value="123WORDPRESS.COM" maxlength="10">
</フォーム>

maxlength 属性が設定されている場合、入力コントロールは許可された数を超える文字を受け入れません。
このプロパティはフィードバックを提供しません。ユーザーに警告する必要がある場合は、JavaScript コードを記述する必要があります。
注意: 入力制限は絶対的なものではありません。 JavaScript には無効な入力を追加する方法が多数用意されています。入力を安全に制限するには、受信者 (サーバー) も制限を確認する必要があります。

幅属性

入力フィールドの幅を定義します。 (type="image" に適用):

<フォームアクション="">
<input type="image" name="img" src="xxx.jpg" width="100">
</フォーム>

高さプロパティ

入力フィールドの高さを定義します。 (type="image" に適用):

<フォームアクション="">
<input type="image" name="img" src="xxx.jpg" height="100">
</フォーム>

src 属性

送信ボタンフォームに表示される画像の URL を定義します。

<フォームアクション="">
<input type="image" name="img" src="xxx.jpg" width="100">
</フォーム>

名前属性

入力要素の名前を定義します。

<フォームアクション="">
<input type="image" name="img" src="xxx.jpg" width="100">
</フォーム>

チェック属性

最初に読み込まれたときにこの入力要素が選択されるように指定します。

<フォームアクション="">
<input type="radio" name="single choice" チェック済み>
</フォーム>

accept属性

ファイルアップロードで送信されるファイルのタイプを指定します。

<フォームアクション="">
<input type="file" name="ファイルをアップロード" accept="text/css">
</フォーム>  

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してご連絡ください。123WORDPRESS.COM をご愛顧いただき、ありがとうございます。

<<:  Apache ソースコードのインストールと仮想ホストの設定に関する詳細なチュートリアル

>>:  さまざまなMySQLインデックスの使用方法の詳細な説明

推薦する

MySQL 10進数符号なし更新負数を0に変換

今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...

MySQLサービスを開くおよび閉じる2つの方法

方法1: cmdコマンドを使用するまず、DOS ウィンドウを開き、スタート、実行、cmd と入力しま...

MySQL 分離列とプレフィックスインデックスの使用の概要

目次データ列を分離するプレフィックスインデックスとインデックスの選択性データ列を分離するMySQL ...

Navicat で MySQL データベースのパスワードを変更する複数の方法

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...

Mysqlデータベースの文字化けに対処する方法

MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...

yum インストールエラーの問題を解決する 保護されたマルチライブラリバージョン

現在、クラウドサーバーに nginx をインストールする際、最初に zlib などの依存ライブラリを...

mysql8.0.19 でパスワードを忘れた場合の完璧な解決策

おすすめの読み物: MySQL 8.0.19 は、間違ったパスワードを 3 回入力するとアカウント ...

jQuery を使用してカルーセル効果を実装する

この記事では、jQueryでカルーセルチャートを実装するための具体的なコードを参考までに共有します。...

MySQLレジストリをクリアする方法

具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...

Element-uiはテーブル内のセルを直接クリックして編集します

目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...

CentOS 8 に htop をインストールする方法のチュートリアル

システムをインタラクティブに監視したい場合は、htop コマンドが最適な選択肢の 1 つです。 ht...

jsはシングルクリックでテーブルを変更することを実装します

Pure jsは、参照用にワンクリックで編集可能なテーブル(トランスクリプトに似たもの)を実装してい...

Nodejs での WeChat アプレット メッセージ プッシュの実装

サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...

Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...

要素フォーム検証で検証プロンプトをクリアする方法

目次問題のシナリオ:解決: 1. フィールドを個別にチェックする2. フォームフィールドの下のフィー...