web-dev-qa-db-fra.com

Résolution du problème de balise HTML <input>

Je me demande pourquoi les balises HTML <input> n'obtiennent pas de balise de fermeture comme les autres balises HTML et que se passerait-il si on fermait une balise de saisie?

J'ai essayé de Google et j'ai trouvé la norme d'écrire une balise d'entrée comme celle-ci <input type="text" name="name"> ne pas la fermer avec un </input>.

J'ai personnellement ressenti le problème lorsque j'ai créé une balise d'entrée pour les boutons Radio à l'aide de

var DOM_tag = document.createElement("input");

Ce bouton radio a été créé, mais la variable TextNode j’ai été ajoutée au bouton radio avec 

document.createTextNode("Radio Label");

ne marche pas. Il montre simplement le bouton radio sans Radio Label comme dans ce cas . Bien que je puisse voir le code complet:

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

Quelqu'un peut-il expliquer s'il vous plaît?

P.S.
Le principal problème qui m’est posé est la fermeture automatique de la balise d’entrée, comme je l’ai mentionné dans la question, car j’utilise var DOM_tag = document.createElement("input");, qui crée automatiquement une balise de fermeture. Que devrais-je faire à ce sujet?

htmltags
54
Nagri

Ce sont des éléments vides. Cela signifie qu'ils ne sont pas conçus pour contenir du texte ou d'autres éléments, et en tant que tels n'ont pas besoin - et en fait, ne peuvent pas avoir - une balise de fermeture en HTML.1

Cependant, ils peuvent être associés à un <label>:

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

Les boutons radio par nature ne peuvent de toute façon pas contenir de texte, il n’a donc aucun sens à accepter du texte ou d’autres éléments comme contenu. Un autre problème avec un contrôle qui accepte le texte en entrée: son contenu textuel doit-il alors être sa valeur ou son libellé? Pour éviter toute ambiguïté, nous avons un élément <label> qui fait exactement ce qu'il dit sur l'étain et un attribut value pour indiquer la valeur d'un contrôle d'entrée.

1XHTML est différent; par règles XML, chaque balise doit être ouverte et fermée; ceci est fait avec la syntaxe de raccourci au lieu d'une balise </input>, bien que cette dernière soit également acceptable:

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

L'origine est dans le concept d'élément vide dans SGML, et l'idée était que certains éléments agissent comme des espaces réservés pour le contenu qui sera inséré à partir d'une source externe ou par l'environnement. C’est pourquoi, par exemple, img et input ont été déclarés comme vides en HTML ou, plus exactement, comme ayant un contenu déclaré par EMPTY (c’est-à-dire qu’il n’existe aucun contenu, contrairement aux éléments dont le contenu est vide). Pour une explication plus détaillée, voir ma page Éléments vides en SGML, HTML, XML et XHTML .

L'implication est que la balise de début pour un tel élément agit également comme balise de fermeture. Les logiciels qui traitent des documents SGML ou HMTL devraient savoir à partir de la définition de type de document (DTD) quelles balises possèdent cette propriété. En pratique, ces informations sont intégrées aux navigateurs Web. L'utilisation d'une balise de fin telle que </input> n'est pas valide, mais les navigateurs ignorent simplement les balises de fin non reconnues ou fausses.

En XML, donc en XHTML, les choses sont différentes, car XML est une variante fortement simplifiée du SGML, destinée à être traitée de manière simpliste. Les logiciels qui traitent XML doivent pouvoir effectuer toutes les analyses sans DTD. XML requiert donc des balises de fermeture pour tous les éléments, bien que vous puissiez (et pour des raisons de compatibilité, principalement should) utiliser une syntaxe spéciale telle que <input /> en abrégé pour <input></input> . Mais XHTML ne permet toujours pas de contenu entre les balises.

Donc, vous ne pouvez pas spécifier l'étiquette d'un élément d'entrée à l'intérieur de l'élément lui-même, car il ne peut avoir aucun contenu. Vous pouvez utiliser les attributs title, value ou (en HTML5) placeholder pour lui associer des textes, de différentes manières, mais pour que le contenu visible normal soit libellé, il doit figurer dans un élément différent. Comme décrit dans d'autres réponses, il est conseillé de le mettre dans un élément label et de définir l'association avec les attributs id et for.

6
Jukka K. Korpela

<input> est une balise vide, en ce sens qu’elle n’a pas de contenu ni de balise de fermeture. Pour la conformité, vous pouvez indiquer la fin de la balise en l’utilisant comme suit:

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

c'est le moyen conforme à XHTML de fermer une balise sans contenu. Il en va de même pour la balise <img>.

Pour étiqueter un bouton radio, il vaut probablement mieux utiliser la balise <label> comme le décrit la réponse de BoltClock.

3
Xyon

Vous pouvez utiliser 

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

mettre l'étiquette à côté du bouton radio.

0
Asad Saeeduddin

L'utilisation de la combinaison createElement/createTextNode donne les meilleurs résultats.

$('#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'))
        )
    )
);

L'extrait ci-dessus produira:

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

Tu peux essayer:

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

pourrait fonctionner, pourrait ne pas. (Cela n'a pas fonctionné pour moi, mais je n'arrive pas à comprendre POURQUOI pas .. Je pensais que ce serait le cas.) Si cela aide, génial. (J'apprends encore le Javascript.)

Sinon, respectez la réponse standard consistant à utiliser:

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

C'est ce que je ferais normalement. À votre santé!

0
Sean Tank Garvey