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 データベースの手動およびスケジュールされたバックアップ手順

目次手動バックアップタイマーバックアップ手動バックアップ1) cmd コンソール: mysqldum...

シンプルな画像ドラッグ効果を実現する js

この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...

Linux コマンドラインで電卓を使用する 5 つのコマンド

みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...

js はマウスによる画像の切り替えを実装します (タイマーなし)

この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。...

docker ストレージを使用して Exit を実行すると、サーバーへのファイルのアップロードが失敗する問題と解決策

1. 問題の説明Docker コンテナにインストールされているストレージが終了状態になっているため、...

WeChatアプレット開発の章:落とし穴の記録

最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...

echartsマップカルーセルハイライトを解決するための記事

目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...

ウェブページのエンコードにおける GB2312、GBK、UTF-8 の違い

まず、GB2312、GBK、UTF-8 はすべて文字エンコーディングであることを理解する必要がありま...

Vue2.0でデータの双方向バインディング機能をjsを使って実装する

Object.definePropertyの理解文法:オブジェクト.defineProperty(o...

MySQLのグローバルロックとテーブルロックに関する詳細な理解

序文ロックの範囲に応じて、MySQL のロックは、グローバル ロック、テーブル ロック、行ロックに大...