Закрытие тега HTML-тега

Ответ 1

Это недействительные элементы. Это означает, что они не предназначены для размещения текста или других элементов и, как таковой, не требуют закрывающего тега.

Однако они могут иметь связанный с ними <label>:

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

Радиоприемники по своей природе не могут содержать текст в любом случае, поэтому для них не будет смысла принимать текст или другие элементы в качестве контента. Другая проблема с элементом управления, который принимает текст как входной: должен ли его текстовый контент быть его значением или его меткой? Чтобы избежать двусмысленности, мы имеем элемент <label>, который делает именно то, что он говорит на олове, и у нас есть атрибут value для обозначения значения входного управления.

Обратите внимание, что HTML не требует явно закрывать тег элемента void. Фактически, закрывающие теги, такие как </input>, явно запрещены в HTML. XHTML отличается; по правилам XML, каждый тег должен быть открыт и закрыт; это делается с синтаксисом ярлыка вместо тега </input>:

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

Ответ 2

Происхождение находится в концепции пустых элементов в SGML, и идея заключалась в том, что некоторые элементы действуют как заполнители содержимого, которые будут вставлены из внешнего источника или из среды. Вот почему img и input, например, были объявлены пустыми в HTML или, точнее, с объявленным содержимым EMPTY (т.е. Без содержимого, как противоположное элементам, которые просто случайно имеют пустой контент). Для более подробного объяснения см. Мою страницу Пустые элементы в SGML, HTML, XML и XHTML.

Импликация заключается в том, что начальный тег для такого элемента также является закрывающим тегом. Ожидается, что программное обеспечение, которое обрабатывает документы SGML или HMTL, будет знать из определения типа документа (DTD), у те тегов это свойство. На практике такая информация встроена в веб-браузеры. Использование конечного тега, такого как </input>, неверно, но браузеры просто пропускают нераспознанный или ложный тег конца.

В XML, следовательно, в XHTML, все по-другому, потому что XML является сильно упрощенным вариантом SGML, предназначенным для упрощения обработки. Программное обеспечение, обрабатывающее XML, должно иметь возможность выполнять весь синтаксический анализ без какого-либо DTD, поэтому XML требует закрытия тегов для всех элементов, хотя вы можете (и, для совместимости, в большинстве случаев) использовать специальный синтаксис, например <input />, как сокращение для <input></input>, Но XHTML по-прежнему не поддерживает контент между тегами.

Таким образом, вы не можете указать метку для элемента ввода внутри самого элемента, так как он не может иметь никакого содержимого. Вы можете использовать атрибуты title, value или (в HTML5) placeholder для связывания текстов с ним, в разных смыслах, но чтобы иметь нормальное видимое содержимое в качестве метки, оно должно быть в другом элементе. Как описано в других ответах, рекомендуется поместить его в элемент label и определить связь с атрибутами id и for.

Ответ 3

<input> - пустой тег, поскольку он не предназначен для создания какого-либо контента или закрывающего тега. Для соответствия вы можете обозначить конец тега, используя его следующим образом:

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

который является XHTML-совместимым способом закрытия тега, у которого нет содержимого. То же самое относится к тегу <img>.

Чтобы пометить радиокнопку, вам, вероятно, лучше всего использовать тег <label>, как описано в ответе BoltClock.

Ответ 4

Вы можете использовать

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

чтобы поместить метку рядом с переключателем.

Ответ 5

Лучше использовать комбинацию 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>

Ответ 6

Вы можете попробовать:

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>

Это то, что я обычно делал. Ура!