HTML詳細シリアル化(3)

コラムリンクlink

次のコラムで紹介します

このコラムは、フロントエンドを独学で学ぶ旅であり、コードを純粋に手で入力し、ダークホースコースに従い、コードとメモに適切な修正を加えるために私自身の理解をいくつか加えました
。皆さんのお役に立てれば幸いです。同時に、私を監督し、私が書いたコードに提案を与え、お互いに学び合ってください。

始める

形状

効果

ユーザー情報を収集する

使用するシーン

ログインページ、登録ページ、検索エリア

inputタグの基本的な使い方

入力タグタイプの属性値が異なる、機能が異なる

例

   <input  type=”...”>

type 属性値と説明

属性値	説明する
文章	一行のテキストを入力するためのテキストボックス
パスワード	パスワードボックス
無線	単一ボックス
チェックボックス	チェックボックス
ファイル	ファイルをアップロードする

ラベルのプレースホルダーテキストを入力

プレースホルダーテキスト: プロンプトメッセージ

例

   <input  type=”...” placeholder=”提示信息”>

知らせ

テキストボックスとパスワードボックスの両方を使用できます

シングルボタンラジオ

属性名	効果	特別な指示
名前	コントロール名	コントロールはグループ化されており、同じグループ内で 1 つだけ選択できます (単一選択機能)
チェック済み	デフォルトで選択されている	属性名は属性値と同じで、1 つの単語に省略されます。

## Upload file-file
デフォルトでは、ファイル アップロード フォーム コントロールは 1 つのファイルのみをアップロードできます。multiple 属性を追加すると、ファイルの複数選択機能を実現できます。

コード例

 <input type=”file”multiple>

複数選択ボックス - チェックボックス

複数選択ボックスはチェックボックスとも呼ばれます

知らせ

デフォルトの選択: チェック済み

コード例

  <input type=”checkbox”checked>敲前端代码

## ドロップダウン メニューは
ネストされたオプションを選択します。選択はドロップダウン メニュー全体、オプションはドロップダウン メニューの各項目です

テキストフィールド

効果

複数行の入力テキストのフォーム コントロール

ラベル：

テキストエリア、二重ラベル

例

  <textarea>默认提示文字</textarea>

ラベル ラベル

効果

Web ページ内のラベルの説明テキスト

経験

lable タグを使用して事務スタッフとフォーム コントロールの間の関係をバインドし、フォームのクリック範囲を拡大します。

書かれたもの

lable タグはコンテンツのみをラップし、フォーム コントロールはラップしません。lable
タグの for 属性の値をフォーム コントロールの id 属性と同じに設定します。

<input type=”radio”id=”man”>
<lable for=”man”>男</lable>

書き方 2:

lable タグを使用してテキストとフォーム コントロールをラップします。属性は必要ありません

<lable><input type=”radio”>女</lable>

強調する

クリック範囲を広げるためのラベル タグをサポートするフォーム コントロール: テキスト ボックス、パスワード ボックス、アップロード ファイル、複数選択ボックス、ドロップダウン メニュー、テキスト フィールドなど。

ボタンボタン

<button type=””>按钮</button>

type 属性値と説明

属性値	説明する
提出する	送信ボタン。クリックするとデータをバックグラウンドに送信します (デフォルト機能)
リセット	リセット ボタン。クリックするとフォーム コントロールをデフォルト値に戻します。
ボタン	通常のボタン。デフォルトでは機能がありません。通常は JavaScript で使用されます。

セマンティック レイアウト タグ

効果

Webページのレイアウト（Webページの領域を分割し、コンテンツを配置）
div：専用改行
span：改行なし

例

<duv>div标签，独占一行</div>
<span>span标签，不换行</span>

文字エンティティ

効果

Web ページ内の予約文字を表示する

シート

結果を示す	説明する	エンティティ名
	空間
<	小なり記号	<
>	大なり記号	>；