ホームページ > 記事 > ウェブフロントエンド > HTML5 フォーム要素にはどのような基本的なコントロールが含まれていますか?
HTML5 フォーム要素にはどのような基本的なコントロールが含まれていますか?
- 青灯夜游オリジナル
- 2021-12-16 16:31:457252ブラウズ
html5 フォーム要素には、次の基本コントロールが含まれます: 1. 単一行のテキスト入力ボックス; 2. パスワード入力ボックス; 3. 複数行のテキスト入力ボックス (テキスト フィールド); 4. ドロップダウン リスト; 5.ラジオボタン; 6. チェックボックス; 7. 送信ボタン; 8. リセットボタン; 9. フィールドコントロール; 10. レジェンドコントロールなど
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
フォームの概要
フォームは通常、ユーザー情報を収集するために使用され、ユーザーが関連情報を入力、選択、送信できるようにします。Web ページでは、ユーザーと対話してユーザーを収集する必要もあります。このとき、フォームも必要です。ユーザー入力用の HTML フォームは、<form></form> タグを使用して作成されます
HTML では、完全なフォームは通常、次のもので構成されます。フォーム コントロール (フォーム要素)、プロンプト情報、フォーム フィールド
フォーム コントロール
次のような特定のフォーム機能項目が含まれます。行テキスト入力ボックス、パスワード入力ボックス、ラジオ ボタン、チェック ボックス、送信ボタン、リセット ボタンなど。
プロンプト情報
通常フォーム内には、ユーザーに入力と操作を促すための説明テキストも含める必要があります。
フォーム フィールド
はコンテナに相当します。フォーム コントロールとプロンプト情報の場合、フォーム データの処理に使用されるプログラムの url アドレスは、フォーム フィールドを通じて定義できます。また、フォーム フィールドを介してデータをサーバーに送信する方法も定義できます。フィールドが定義されていない場合、フォーム内のデータをバックグラウンドに送信できません。サーバー
#完全なフォームには次の要素が含まれています
- form
- HTML フォームの作成に使用されます
- コントロール (単一ラベル) は、入力ボックス、ラジオ ボックス、チェック ボックスの設定、ファイルのアップロード、送信ボタンなど。
- は対応します。input タグは注釈 (マークまたは説明とみなすことができます) を定義します。注釈付きの入力ボックスが入力ボックスの場合は、カーソル注釈付きコンテンツ
- コントロールをクリックすると、入力ボックスに自動的にフォーカスされます。複数行のテキスト入力ボックス (テキスト フィールド) の作成に使用されます
- はドロップダウン リストの定義に使用され、option タグと組み合わせて使用する必要があります。select を使用する場合は、サーバーへの送信に使用される name 属性を設定する必要があります。フォーム データを識別する
- ドロップダウン リストの項目を定義します。デフォルトでは、選択できる項目は 1 つだけです。使用する場合は value 属性を設定する必要があります。フォームを送信するとき、対応するオプション値がサーバーに送信されます。
- グループ関連のフォーム要素。通常は
legendタグ legend と組み合わせて使用されます。 - for fieldest グループ要素定義タイトル
- ボタンを定義します。この要素がフォームで使用される場合、この要素にはフォームを送信する機能があります。通常、フォームの送信はフォーム内の input タグの type 属性を通じて設定されます。 Button
Label
- name
フォームの名前を設定します
- action
フォームの送信アクションフォームが送信される場所を示します。値は URL であり、相対アドレスまたは絶対アドレスを指定できます。
- method
フォームの送信方法。フォームの送信に使用する HTTP メソッド。一般的な値は get または post
- enctype
フォーム データのエンコードのエンコード方法を設定します。サーバーは送信されたデータをデコードします。設定されたエンコード方式に従ってデータ;
値は 3 つあります:- application/x-www-form-urlencoded
- 送信前にすべての文字をエンコードします (デフォルト) )
- 文字をエンコードしないでください。ファイル アップロード コントロールを含むフォームを使用する場合は、この値を使用する必要があります
- スペースは " " プラス記号に変換されますが、特殊文字はエンコードされません
- 送信前にすべての文字をエンコードします (デフォルト) )
ラベル
- name
入力要素の名前を定義し、現在のラベルをサーバーに送信します この属性は、
# のデータが存在する場合に設定する必要があります。 - value
input 要素の値を設定します。
value 属性は、入力タイプごとに異なる使用法を持ちます:- テキスト、パスワードの場合、非表示タイプ、入力ボックスの初期 (デフォルト) 値を定義するために使用されます。
- チェックボックス、ラジオ、画像タイプの場合、入力要素に関連する値を定義するために使用されます。フォームが送信されると、値がフォームのアクション URL に送信されます。
- #ボタン、リセット、および送信タイプの場合、ボタンの定義に使用されます。表示されるテキストの内容
-
注:
入力タイプがチェックボックスとラジオの場合、value 属性を設定する必要があります
maxlength - Set inputタグの最大文字数です。値は数値型です。最大文字数を超える部分は入力されません。通常は入力ボックスに使用されます
autofocusこの属性が設定されている場合、ページが読み込まれるときに自動的にフォーカスされます。属性値を記述する必要はありません。フォームには入力タグを 1 つだけ含めることができます。プレースホルダー短いプロンプト テキストを設定するために使用され、主に入力ボックスで使用され、プロンプト情報は表示されなくなります。コンテンツ入力時に自動的にcheckedデフォルトで選択されるオプションを設定します。属性値はチェックされていますが、省略可能です。この属性はのみです。 type="checkbox" または type="radio" に有効-
accept送信されたファイルのタイプを設定します。これは type=" の場合にのみ有効です。 file"; [ファイルの選択] ボタンをクリックすると、ファイル タイプのみがポップアップ リソース マネージャーに表示されます。一致するファイル タイプ属性値は次のとおりです:
-
audio/*すべてのオーディオ ファイル -
video/*すべてのビデオ ファイル -
image/*すべての画像ファイル
-
##src
送信ボタンとして表示されるように設定します。画像の位置、値は url です。この属性は type= と組み合わせて使用されます。 image"alt
画像ボタンの画像が表示できない場合の代替テキスト。この属性は type="image"でのみ使用できます。-
type
タイプの対応する属性値は次のとおりです:は、入力タグの表示タイプを決定するために使用されます。対応する属性値は多数あり、異なる属性値は異なるタイプに対応します。デフォルトはテキストです-
text
オートフォーカス: <pre class="brush:php;toolbar:false"><input></pre>単一行のテキスト入力ボックス、デフォルトの幅は英語の 20 文字です
デフォルト値を設定します: <input>
<pre class="brush:php;toolbar:false"><input></pre>
最大文字数を設定します:
<pre class="brush:php;toolbar:false"><input></pre>
プロンプト情報の設定: 
- ##password
パスワード入力ボックス、入力内容は表示されますドット形式。テキストと同じように、値や最大長なども設定できます。
<pre class="brush:php;toolbar:false"><input></pre>
##radio - ラジオ ボタン、複数オプション 選択できるのは 1 つだけです。ラジオ ボタンのグループを使用する場合、複数の input タグで name 属性を設定し、name 属性値が同じである必要があります。このタイプのタグを使用する場合は、value 属性を設定する必要があります。選択した項目の値をサーバーに伝えます
<input>男<input>女
設定はデフォルトでチェックされます:<input>男<input>女
##checkbox
は、チェック ボックスを定義するために使用されます。オプションのセットから 1 つ以上を選択できます。また、name 属性を設定する必要があります。name 属性の値は同じである必要があり、値; 複数を選択すると、フォームの送信時に複数の値が送信されます。サーバー -
<input>妩媚<input>柔美<input>可爱<input>妖娆
複数のデフォルトを選択するように設定します:<input>妩媚<input>柔美<input>可爱<input>妖娆
アップロードするファイルを選択するために使用されます。アップロードするファイルは手動で選択する必要があります
file
-
-
image
<pre class="brush:php;toolbar:false"><input></pre>
画像を送信ボタンとして使用します -
クリック可能なボタンを設定します。value 属性を使用してボタンに表示されるテキストを設定し、onclick 属性を使用してクリック イベントを作成します <pre class="brush:php;toolbar:false"><input></pre>##button
-
-
submit用于定义提交按钮；点击该按钮会对表单进行提交；可以通过 value 属性设置按钮显示的文本，未设置 value 时默认显示为 “提交”<pre class="brush:php;toolbar:false"><input></pre>
-
react设置重置按钮；点击该按钮后会对表单进行重置（在表单中填写的内容会被清空）
-
hidden用于定义隐藏字段，隐藏字段对于用户不可见<pre class="brush:php;toolbar:false"><input></pre>
-
<textarea></textarea> 标签
-
name文本域的名称 -
cols设置文本区内的可见宽度（每行显示的英文字符个数，列数）；值为数值类型 -
rows设置文本区内的可见行数（行数） -
required设置为必填项；值为 required -
disabled禁用
<textarea></textarea>
p 标签设置 contenteditable="true" 也可以实现文本域效果
<p></p>
相关 CSS 样式：
p {
width: 600px;
height: 300px;
min-height: 200px;
_height: 200px;
/*消除聚焦时出现的高亮边框*/
outline: 0;
/*当内容溢出时，自动添加滚动条*/
overflow: auto;
border: 1px solid gray;}
<label></label> 标签
-
for规定与哪个表单元素进行绑定，其值为 input 标签的 id 属性对应的值<input>
也可以不使用 for 属性，直接用 label 标签包裹需要标注的 input
<select></select> 标签
-
name定义下拉列表的名称 -
size设置显示下拉列表中可选项的数目 -
disabled禁用下拉列表（无法点击选择）
<option></option> 标签
-
value用于设置选项值，被选中的项对应的值在表单提交时会传给服务器 -
disabled设置禁用项，设置该属性的选项会被禁用 -
selected设置默认选中项
默认效果：
<select> <option>北京</option> <option>天津</option> <option>上海</option> <option>重庆</option> <option>广州</option> <option>深圳</option> </select>
select 标签设置了 size 后的效果
<select></select>
select 标签设置了 disabled 后的效果
<select></select>
<fieldest><fieldest></fieldest></fieldest> 标签
-
name定义 fieldest 的名称 -
disabled禁用
<legend></legend> 标签
-
align标题文本的对齐方式；值为 top、bottom、left、right
<button></button> 标签
-
button可点击按钮；IE 默认值 -
submit提交按钮；除 IE 外其他浏览器的默认值 -
reset重置按钮，清除表单数据
推荐教程：《html视频教程》
以上がHTML5 フォーム要素にはどのような基本的なコントロールが含まれていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。