HTML5 フォーム要素にはどのような基本的なコントロールが含まれていますか?

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
• コントロール (単一ラベル) は、入力ボックス、ラジオ ボックス、チェック ボックスの設定、ファイルのアップロード、送信ボタンなど。
label
• は対応します。input タグは注釈 (マークまたは説明とみなすことができます) を定義します。注釈付きの入力ボックスが入力ボックスの場合は、カーソル注釈付きコンテンツ
textarea
• コントロールをクリックすると、入力ボックスに自動的にフォーカスされます。複数行のテキスト入力ボックス (テキスト フィールド) の作成に使用されます
select
• はドロップダウン リストの定義に使用され、option タグと組み合わせて使用​​する必要があります。select を使用する場合は、サーバーへの送信に使用される name 属性を設定する必要があります。フォーム データを識別する
オプション
• ドロップダウン リストの項目を定義します。デフォルトでは、選択できる項目は 1 つだけです。使用する場合は value 属性を設定する必要があります。フォームを送信するとき、対応するオプション値がサーバーに送信されます。
fieldest
• グループ関連のフォーム要素。通常は legend タグ
legend と組み合わせて使用​​されます。
• for fieldest グループ要素定義タイトル
button
• ボタンを定義します。この要素がフォームで使用される場合、この要素にはフォームを送信する機能があります。通常、フォームの送信はフォーム内の input タグの type 属性を通じて設定されます。 Button
各ラベルの共通属性

<form></form>

Label

• name

  フォームの名前を設定します

• action

  フォームの送信アクションフォームが送信される場所を示します。値は URL であり、相対アドレスまたは絶対アドレスを指定できます。

• method

  フォームの送信方法。フォームの送信に使用する HTTP メソッド。一般的な値は get または post

• enctype

  フォーム データのエンコードのエンコード方法を設定します。サーバーは送信されたデータをデコードします。設定されたエンコード方式に従ってデータ; 値は 3 つあります:

  application/x-www-form-urlencoded
  • 送信前にすべての文字をエンコードします (デフォルト) )
  multipart/form-data
  • 文字をエンコードしないでください。ファイル アップロード コントロールを含むフォームを使用する場合は、この値を使用する必要があります
  text/plain
  • スペースは " " プラス記号に変換されますが、特殊文字はエンコードされません

<input>

ラベル

• 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 単一行のテキスト入力ボックス、デフォルトの幅は英語の 20 文字です

    オートフォーカス:
    <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

    デフォルト値を設定します:
    

     <input>

    最大文字数を設定します:
    

    <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

    プロンプト情報の設定:
    

    <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

    

  • ##password

    パスワード入力ボックス、入力内容は表示されますドット形式。テキストと同じように、値や最大長なども設定できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

    

  ##radio
  • ラジオ ボタン、複数オプション 選択できるのは 1 つだけです。ラジオ ボタンのグループを使用する場合、複数の input タグで name 属性を設定し、name 属性値が同じである必要があります。このタイプのタグを使用する場合は、value 属性を設定する必要があります。選択した項目の値をサーバーに伝えます

    <input>男<input>女

    設定はデフォルトでチェックされます:

    <input>男<input>女

    
    

    

    ##checkbox
  は、チェック ボックスを定義するために使用されます。オプションのセットから 1 つ以上を選択できます。また、name 属性を設定する必要があります。name 属性の値は同じである必要があり、値; 複数を選択すると、フォームの送信時に複数の値が送信されます。サーバー

  • <input>妩媚<input>柔美<input>可爱<input>妖娆

    複数のデフォルトを選択するように設定します:

    <input>妩媚<input>柔美<input>可爱<input>妖娆

    
    

    file

    アップロードするファイルを選択するために使用されます。アップロードするファイルは手動で選択する必要があります
  <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

• image 画像を送信ボタンとして使用します

  <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

• ##button

  クリック可能なボタンを設定します。value 属性を使用してボタンに表示されるテキストを設定し、onclick 属性を使用してクリック イベントを作成します
  <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

• • submit 用于定义提交按钮；点击该按钮会对表单进行提交；可以通过 value 属性设置按钮显示的文本，未设置 value 时默认显示为 “提交”<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>
  • react 设置重置按钮；点击该按钮后会对表单进行重置（在表单中填写的内容会被清空）
    用户名：<input> 密码：<input> <input> <input>

  

  • hidden 用于定义隐藏字段，隐藏字段对于用户不可见<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;input&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

<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

  用户名<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

  

基本信息

  姓名：<input>   年龄：<input>

  

健康信息

  身高：<input>   体重：<input>

<button></button> 标签

• button 可点击按钮；IE 默认值
• submit 提交按钮；除 IE 外其他浏览器的默认值
• reset 重置按钮，清除表单数据

推荐教程：《html视频教程》

以上がHTML5 フォーム要素にはどのような基本的なコントロールが含まれていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。