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

推薦する

Docker の MySQL コンテナのタイムゾーン問題の修正

序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...

MySQL への接続時に発生する 1449 および 1045 例外の解決方法

MySQL への接続時に発生する 1449 および 1045 例外の解決方法 mysql 1449:...

Xftp のダウンロードとインストールのチュートリアル (グラフィック チュートリアル)

Windows と Linux 間でファイルを転送する場合は、Xftp ツールを使用できます。この...

つまり、フィルターコレクション

IE は開発の初期段階では頭を悩ませましたが、他のブラウザとは異なります。他のブラウザがサポートして...

純粋な CSS3 でペットの鶏のサンプルコードを実現

最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...

webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...

docker ベースの mariadb のインストール構成プロセスの分析

1. インストール dockerhub を通じてインストールする mariadb のバージョンを検索...

vue.config.js パッケージ最適化構成

Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

Amap を使用した React 実装例 (react-amap)

React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したと...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

TypeScript 環境を構築して VSCode にデプロイする詳細な手順

目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...

MySQL の CPU 負荷が高い問題のトラブルシューティング

MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...