Закрывающий HTML-тег вопрос

интересно, почему 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>

может кто-нибудь объяснить, пожалуйста ?

П. С.
Основная проблема, которая возникла у меня, - это автоматическое закрытие входного тега, как я уже упоминал в вопросе, поскольку я использую var DOM_tag = document.createElement("input");, который автоматически создает закрывающий тег. Что мне с этим делать ?

6 51
html tags

6 ответов:

это пустые элементы. Это означает, что они не предназначены для содержания текста или других элементов, и как таковые не нужны - и на самом деле,не может быть - закрывающий тег в 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>
78

источник находится в концепции пустого элемента в SGML, и идея заключалась в том, что некоторые элементы выступают в качестве заполнителей для контента, который будет вставлен из внешнего источника или среды. Вот почему img и input, например, были объявлены как пустые в HTML, или, точнее, как имеющие пустой объявленный контент (т. е. нет контента, возможно, в отличие от элементов, которые просто случайно имеют пустой контент). Более подробное объяснение см. На моей странице пустые элементы в 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 атрибуты.

6

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

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

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

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

3

можно использовать 

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

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

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>
0

можно попробовать:

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