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インデックスの使用方法の詳細な説明

推薦する

jQuery はシャッター効果を実現します (li 配置を使用)

この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体...

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...

MySQL での replace と replace into の使い方の説明

MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...

VMware WorkStation を Docker for Windows で使用するための詳細なチュートリアル

目次1. はじめに2. Windows用Dockerをインストールする1. Windows用Dock...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)

アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...

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

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

Jenkins の Publish Over SSH プラグインを使用してプロジェクトをリモート マシンにデプロイする手順

SSH プラグインの使用による公開Publish Over SSH を使用する前に、SSH 秘密キー...

Reactの新バージョンのライフサイクルフック機能と使用方法の詳細な説明

旧ライフサイクルと比較して 3つのフックが廃止され、2つの新しいフックが追加されましたReact16...

Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...

ReactにおけるRefの相互利用の詳細な説明

目次1. まずRefとは何かを説明しましょう2. フックでのrefの使用1. HTMLDomフックで...

HTML 初心者のためのベストプラクティス 15 選

HTML 初心者向けのベストプラクティスを 30 個紹介します。 1. タグを閉じたままにする過去に...