web-dev-qa-db-ja.com

HTML <input>タグを閉じる問題

HTML _<input>_タグが他のHTMLタグのように終了タグを取得しないのはなぜか、入力タグを閉じるとどうなるのでしょうか？

Googleを試してみたところ、この_<input type="text" name="name">_のような入力タグを記述する標準が、_</input>_で閉じていませんでした。

を使用してRadioボタンの入力タグを作成すると、個人的に問題を感じました

_var DOM_tag = document.createElement("input");
_

これはラジオボタンを作成しましたが、TextNodeをラジオボタンに追加しました

_document.createTextNode("Radio Label");
_

動作しません。この場合のように、_Radio Label_のないラジオボタンが表示されます。完全なコードを見ることができますが：

_<input id="my_id" type="radio" name="radio_name">Radio Label</input>
_

誰でも説明してもらえますか？

P.S。
発生した主な問題は、自動的に終了タグを作成するvar DOM_tag = document.createElement("input");を使用しているため、質問で述べたように入力タグが自動的に閉じることです。それについてどうすればよいですか？

htmltags
59
Nagri

これらは空の要素です。つまり、テキストやその他の要素を含むように設計されていないため、HTMLの終了タグ（実際にはcannot have）は不要です。1

ただし、それらには<label>を関連付けることができます：

<input id="my_id" type="radio" name="radio_name">
<label for="my_id">Radio Label</label>

とにかくラジオボタンにはテキストを含めることができないため、テキストやその他の要素をコンテンツとして受け入れることは意味がありません。入力としてテキストを受け入れるコントロールの別の問題：テキストコンテンツはその値か、ラベルか？あいまいさを避けるため、ブリキで正確に言うことを行う<label>要素があり、入力コントロールの値を示すvalue属性があります。

1XHTMLは異なります。 XMLルールにより、すべてのタグを開閉する必要があります。これは、</input>タグの代わりにショートカット構文を使用して行われますが、後者も同様に受け入れられます。

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>
88
BoltClock

OriginはSGMLの空の要素の概念にあり、一部の要素は外部ソースから、または環境によって挿入されるコンテンツのプレースホルダーとして機能するという考え方でした。これが、たとえばimgとinputがHTMLで空として宣言された理由、またはより正確にはEMPTYがコンテンツを宣言している理由です（つまり、コンテンツはない可能性があります。何気なく空のコンテンツがあります）。より長い説明については、私のページを参照してください SGML、HTML、XML、およびXHTMLの空の要素 。

その意味は、そのような要素の開始タグも終了タグとして機能するということです。 SGMLまたはHMTLドキュメントを処理するソフトウェアは、どのタグがこのプロパティを持っているかをドキュメントタイプ定義（DTD）から知ることが期待されます。実際には、このような情報はWebブラウザーに組み込まれています。 </input>のような終了タグを使用することは無効ですが、ブラウザは認識されないまたは偽の終了タグをスキップします。

XML、つまりXHTMLでは、物事は異なります。XMLは単純に処理されることを意図した、SGMLの非常に単純化されたバリアントであるためです。 XMLを処理するソフトウェアは、DTDを使用せずにすべての解析を実行できる必要があります。そのため、XMLではすべての要素の終了タグが必要になります（ただし、互換性のため、ほとんどの場合should）<input />の省略形として<input></input>などの特別な構文を使用します。ただし、XHTMLはタグ間のコンテンツを許可しません。

そのため、要素自体の中にinput要素のラベルを指定することはできません。これは、要素にコンテンツを含めることができないためです。 title、value、または（HTML5では）placeholder属性を使用して、テキストをさまざまな意味で関連付けることができますが、通常の表示コンテンツをラベルとして使用し、別の要素にある必要があります。他の回答で説明されているように、label要素に配置し、idおよびfor属性との関連付けを定義することをお勧めします。

8
Jukka K. Korpela

<input>は空のタグです。コンテンツまたは終了タグを持たないように設計されています。コンプライアンスのために、次のようにタグを使用してタグの終わりを示すことができます。

<input type="text" value="blah" />

これは、コンテンツのないタグを閉じるXHTML準拠の方法です。 <img>タグについても同じことが言えます。

ラジオボタンにラベルを付けるには、おそらくBoltClockの答えで説明されているように、<label>タグを使用するのが最善です。

3
Xyon

使用できます

var label = document.createTextNode("Radio Label");
DOM_tag.parentElement.insertBefore(label,DOM_tag);

ラジオボタンの横にラベルを配置します。

0
Asad Saeeduddin

CreateElement/createTextNodeの組み合わせを使用するのが最適です。

$('#list-consultant').append(
    $(document.createElement('div')).addClass('checkbox').append(
        $(document.createElement('label')).append(
            $(document.createElement('input')).prop({
                type: 'checkbox',
                checked: 'checked'
            }),
            $(document.createTextNode('Ron Jeremy'))
        )
    )
);

上記のスニペットは以下を生成します：

<div id='list-consultant'>
    <div class='checkbox'>
        <label><input type='checkbox' checked='checked'/>Ron Jeremy</label>
    </div>
</div>
0
Richie

あなたが試すことができます：

var label = document.createTextNode("Radio Label");
document.createElement("input").prop({type="text"});
document.write(input.append(label));

動作するかもしれませんが、動作しないかもしれません。 （それは私にとってはうまくいきませんでしたが、なぜそうなのかわかりません。 （私はまだJavascriptを学んでいます。）

それ以外の場合は、次を使用する標準的な答えを守ります。

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>

それは私が通常行うことです。乾杯！

0
Sean Tank Garvey