81

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

私はグーグルを試してみましたが、このような入力タグを.<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>

説明とは何ですか？

PS

私に起こった主な問題は、私が使用しているときに質問で述べたように、入力タグが自動的に閉じられることですvar DOM_tag = document.createElement("input"); 。これにより、閉じタグが自動的に作成されます。私はそれについて何をすべきですか？

4

6 に答える 6

121

これらは無効な要素です。つまり、テキストやその他の要素を含むように設計されていないため、HTMLの終了タグは必要ありません（実際には持つことはできません）。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>
于 2012-11-05T12:30:30.783 に答える
16

起源はSGMLの空の要素の概念にあり、一部の要素は外部ソースまたは環境によって挿入されるコンテンツのプレースホルダーとして機能するという考えでした。

これが、たとえば、HTMLで空として宣言された、またはより正確には、コンテンツを宣言したimgと宣言された理由です（つまり、何気なく空のコンテンツを持つ要素とは反対に、コンテンツは使用できません）。詳細については、私のページSGML、HTML、XML、およびXHTMLの空の要素を参照してください。inputEMPTY

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

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

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

于 2012-11-05T13:10:17.927 に答える
7

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

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

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

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

于 2012-11-05T12:30:56.327 に答える
0

使用できます

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

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

于 2012-11-05T12:34:50.953 に答える
0

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>
于 2015-10-20T22:50:20.517 に答える
-1

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

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>

それは私が通常することです。

于 2017-07-05T22:41:38.810 に答える