HTML/CSS テキスト入力ボックスにはどのようなプロパティがありますか?

テキスト入力ボックスの属性は次のとおりです: 1. accept (ファイルのアップロードを通じて送信されるファイルのタイプを指定します)、2. alt (画像入力の代替テキストを定義します)、3. disabled (無効)、無効な状態; 4. formaction 、フォームが送信されたときに入力コントロールを処理するファイルの URL を規定します; 5. formtarget 、フォーム送信後に受信した応答の名前またはキーワードを表示する場所を規定します; 6.cols、規定しますテキスト領域の表示幅; 7. readonly 、読み取り専用ステータスと同じ。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

HTML/CSS には、2 種類のテキスト入力ボックスがあります:

• input: 単一行のテキスト入力ボックス

• textarea : 複数行のテキスト入力ボックス

これら 2 つの入力ボックスでサポートされるプロパティについて説明します。

input 入力ボックスの属性

<input> タグは、ユーザーがデータを入力できる入力フィールドを指定します。

#フォームターゲット_blank _自己 _親 _top は、フォームの送信後に受け取った応答の名前またはキーワードを表示する場所を指定します。 (type="submit" および type="image" にのみ適しています)高さ要件 < ; input> 要素の高さ。 (type="image" の場合のみ)list 属性は #最大番号 datemaxlengthnumber#分#数値 datemultipletextregexptextreadonlyrequired#sizenumbersize 属性は、<input> 要素の表示幅を文字数で指定します。 srcURL src 属性は、送信ボタンとして表示される画像の URL を指定します。 （それだけに type="image")stepnumberstep 属性は、<input>typebuttoncheckboxcolordatetime

属性	値	説明
accept	audio/* ビデオ/* image/*MIME_type	ファイル アップロードを通じて送信されるファイルのタイプを指定します。 (type="file" の場合のみ)
align	left 右 上 真ん中 Bottom	HTML5 は廃止され、非推奨になりました。画像入力の配置を指定します。 (type="image" の場合のみ)
alt	text	画像の代替テキストを定義します入力を行ってください。 (type="image" の場合のみ)
autocomplete	on off	autocomplete 属性は、<input> 要素の入力フィールドでオートコンプリートを有効にするかどうかを指定します。
autofocus	autofocus	この属性は、ページの読み込み時に <input> 要素が自動的にフォーカスを取得することを指定します。
checked	checked	checked 属性は、ページの読み込み時にどの <input> 要素を事前に選択するかを指定します。 (type="checkbox" または type="radio" の場合のみ)
disabled	disabled	disabled 属性は、入力すべき <input>
form	form_id	form 属性は、<input> 要素が属するフォームを指定します。
formaction	URL	プロパティは、フォームの送信時に入力コントロールを処理するファイルの URL を指定します。 。 (type="submit" および type="image" の場合のみ)
formenctype	application/x-www-form-urlencoded マルチパート/フォームデータ text/plain	属性は、サーバーに送信するときにフォーム データをエンコードする方法を指定します (type="submit" および type="image" にのみ適しています)。
フォームメソッド	get post	フォーム データをアクション URL に送信する HTTP メソッドを定義します。 (type="submit" および type="image" にのみ適しています)
formnovalidate	formnovalidate	formnovalidate 属性は をオーバーライドします。要素の novalidate 属性。
	framename
	ピクセル
	datalist_id
	属性は、<input> 要素の最大値を指定します。
	属性は、<input> 要素で許可される最大文字数を指定します。
	属性は、<input> 要素の最小値を指定します。	multiple
属性は、ユーザーが <input> 要素に複数の値を入力できることを指定します。		name
	name 属性は、<input> 要素の名前を指定します。	pattern
	pattern 属性は、<input> の値を検証するために使用される正規表現を指定します。要素。	placeholder
	placeholder 属性は、入力 <input>	readonly
readonly 属性は、入力フィールドが読み取り専用であることを指定します。		required
属性は、フォームを送信する前に入力フィールドに入力する必要があることを指定します。
date	datetime-local email file 非表示 画像 月 番号 パスワード radio range reset search submit tel text time url week	type 属性は、< を指定します。表示される ;input> 要素のタイプ。
value	text	<input> 要素の値を指定します。
width	pixels	width 属性は、<input> 要素の幅を指定します。 (type="image" の場合のみ)

##type 属性は、表示される <input> 要素のタイプを指定します。デフォルトのタイプはテキストです。

HTML5 の新しい type 属性値の例

• color

クリックするとカラーセレクターが表示され、任意の色を選択できます

##番号

範囲内の番号を入力してください。範囲外の番号を手動で入力することはできますが、送信することはできません。

tel
• 電話番号を入力してください (Safari のみ)

  
  

email
• に対応 送信時に@記号の有無と前後の文字の有無を検出する検出機能付き

  
  

範囲

• 
  

url
• 入力する URL は http で始まる必要があります:// の後に文字が必要です。そうでない場合は送信できません。

  
  

search

• 検索文字列の入力に使用するテキスト フィールドを定義します。

  
  

  #日付制御 - 日付

<input>

#時間制御 - 時間

#

<input>
<input>

#日付時刻制御-datetime-local

• ##

  <input>

月コントロール-月

• <input>

週コントロール- 週

##

<input>

#日付と時刻の制御--datetime

<input>

注: 日付と時刻のコントロールは、min 属性と max 属性もサポートしています。設定できる最小時間と最大時間を示します

• #

  <input>

textarea 入力ボックスの属性

<p><img src="https://img.php.cn/upload/image/460/938/916/164240238388582HTML/CSS%20%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E5%85%A5%E5%8A%9B%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B?" title="164240238388582HTML/CSS テキスト入力ボックスにはどのようなプロパティがありますか?" alt="HTML/CSS テキスト入力ボックスにはどのようなプロパティがありますか?"></p>#プロパティ<p><span style="max-width:90%">値<strong></strong>説明</span></p> <p></p>autofocus<table class="reference notranslate"><tbody>autofocus <tr class="firstRow"> <th align="left" width="20%">ページが読み込まれるときに、テキスト領域が自動的にフォーカスを取得するように指定します。 </th> <th align="left" width="20%"></th>#cols<th align="left" width="60%"></th> </tr>number<tr> <td style="word-break: break-all;"></td>テキスト領域内の表示幅を指定します。 <td style="word-break: break-all;"></td> <td></td>disabled</tr> <tr>disabled<td></td>テキスト領域が無効であることを指定します。 <td><em></em></td>form<td></td> </tr>form_id<tr> <td></td> テキスト領域が属する 1 つ以上のフォームを定義します。 <td></td> <td></td>maxlength</tr> <tr> <td style="word-break: break-all;">number</td> <td><em>テキスト領域に許可される最大文字数を指定します。 </em></td> <td></td>name</tr> <tr> <td style="word-break: break-all;">text</td> <td><em>テキスト領域の名前を指定します。 </em></td> <td></td>placeholder</tr> <tr> <td>text</td> <td><em>テキスト領域の予期される入力値を説明する短いヒントを指定します。 </em></td> <td></td>readonly</tr> <tr>readonly<td style="word-break: break-all;"></td>テキスト領域が読み取り専用であることを指定します。 <td><em></em></td>required<td></td>required</tr> <tr>テキスト領域が必須/必須であることを指定します。 <td></td> <td>#rows</td> <td></td>number</tr> <tr> <td style="word-break: break-all;">テキスト領域に表示される行数を指定します。 </td> <td></td> <td>ラップ</td> </tr>ハード<tr> Soft<td></td>フォームの送信時にテキスト領域内のテキストをどのように折り返すかを指定します。 <td><em></em></td> <p>textarea文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。</p> <p>可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。</p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </html></pre><p><img src="https://img.php.cn/upload/image/757/742/732/166391495611950HTML/CSS%20%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E5%85%A5%E5%8A%9B%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B?" title="166391495611950HTML/CSS テキスト入力ボックスにはどのようなプロパティがありますか?" alt="HTML/CSS テキスト入力ボックスにはどのようなプロパティがありますか?"></p> <p>（学习视频分享：<a href="https://www.php.cn/course/list/1.html" target="_blank" textvalue="web前端">web前端</a>）</p> </tr> </tbody></table>

以上がHTML/CSS テキスト入力ボックスにはどのようなプロパティがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。