HTMLフォーム作成時のlabelタグの使い方-htmlチュートリアル-php.cn

HTMLフォーム作成時のlabelタグの使い方

不言

リリース： 2021-04-22 15:51:57

オリジナル

7113 人が閲覧しました

HTML でフォームを作成するときにラベル label を使用する方法: 1. 入力ラベルをラベルラベルの間に配置します。 2. 「Name: label>」を渡します。 ;" 方法。

HTMLフォーム作成時のlabelタグの使い方

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

labelタグはフォームを作成する際に非常に重要なので、この記事ではHTMLでフォームを作成する際のlabelタグの使い方を紹介します。

まず、ラベル label とは何かを見てみましょう。

例えば、HTMLで表を作成する場合、テキストボックスの横に「名前」などの文字を表示し、その横に「男性」「女性」などの文字を表示することができます。ラジオボタンをクリックしてください。説明する必要がある場合は、「ラベル label」を使用するのが最適です。

ラベルラベルの書き方

ラベルラベルを記述する方法は 2 つあります。

1 つはラベルタグの間に置く方法です。 for 属性を使用することです。

ラベルタグを使用してフォームのさまざまな部分を分割し、ラベルタグの間に配置する方法

<label> <input type =“radio”name =“sex”value =“man”/> man </ label>

ログイン後にコピー

for属性を使用する方法

<label for =“text_id”>名称：</ label> 
<input type =“text”name =“name”id =“text_id”/>

ログイン後にコピー

方法これは機能しますか? フォームパーツの ID をラベルタグの for 属性に指定します。

具体的な例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
</head>
<body>
<label for ="name">名字</label>
    <input type ="text" name ="name" id ="name" placeholder ="name"> <br/> 
    <label> <input type ="radio" name ="sex" value ="male">男</label> 
    <label> <input type ="radio" name ="sex" value ="female">女</label> <br/> 
    <label for ="food">最喜欢的食物</label> 
    <select name ="food" id ="name">
      <option value ="meat"> meat </option> 
      <option value ="fish"> fish </option> 
      <option value ="vegetable"> vegetables </option> 
      <option value ="other">其他</option>
    </select> 
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

HTMLフォーム作成時のlabelタグの使い方

インタラクティブコンテンツの例

インタラクティブコンテンツは、ユーザーが利用規約のチェックボックスをオンにする必要があるコンテンツです。

利用規約に同意するチェックボックスをオンにした場合、タグブロックの外側に記載することで利便性が向上します。

悪いユーザビリティの例:

<label> 
 <input type ="checkbox" name ="sample"> 
 我同意<a href="sample.html">服务条款</a>。
 </ label>

ログイン後にコピー

少し良いユーザビリティの例:

<label> 
 <input type ="checkbox" name ="sample"> 
 我同意服务条款。</ label>
  <p> 
 <a href="sample.html">服务条款</a> 
 </p>

ログイン後にコピー

上記はこの記事の全内容です。さらに興味深い内容については、こちらをご覧ください。 php 中国語 Web サイトの

html ビデオチュートリアル列を参照してください。！！

以上がHTMLフォーム作成時のlabelタグの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。