Soumettre Le Formulaire À L'Aide De Balise D'Étiquette

Il est difficile de style de soumettre des entrées sans l'aide d'images ou de javascript.

Que je sache il n'y a pas moyen d'insérer du code HTML à droite dans la soumettre valeur d'entrée. Et si je l'envelopper de soumettre des commentaires dans un élément div (par exemple pour ajouter de multiples frontières), et non pas l'ensemble de la zone sera cliquable.

Un clic sur un nom de provoquer la soumission du formulaire dans tous les navigateurs?

<form method="test.rb">
 <input type="text" name="test" id="test" />
 <label for="button">
  <input type="submit" name="button" id="button" value="Send!" />
 </label>
</form>

OriginalL'auteur Denis Bobrovnikov | 2010-11-23

  1. 7

    Selon le W3C sur les associe dans ce cas des étiquettes:

    L'étiquette de l'élément n'est pas utilisé pour la suite parce que les étiquettes de ces éléments sont fournis par la valeur de l'attribut (pour les Soumettre et les boutons Reset), l'attribut alt (pour les boutons image), ou le contenu de l'élément lui-même (bouton).

    Grâce à @Jeremiah Isaacson pour le pointage.

    Vieille Réponse

    Oui, cela fonctionne. Je ne peux pas valider le comportement sur tous les navigateurs, mais voici ce que W3C spec a à dire:

    D'associer une étiquette avec un autre
    contrôle implicitement, le contrôle
    l'élément doit être dans le contenu de
    l'élément LABEL ... Lorsqu'une ÉTIQUETTE
    élément reçoit le focus, il passe à l'
    focus sur associés à son contrôle.

    Donc, je suppose en cliquant sur l'ÉTIQUETTE, vous êtes essentiellement en cliquant sur la soumettre des commentaires.

    Grâce à @stevelove de préciser la faisabilité de cette.

    Ce qui fait <label>Enter age: <input type="text" /></label> plus sémantiques que <label>To submit form: <input type="submit" value="Click Here" /></label>?
    Cela dit, si l'idée est d'envelopper le bouton dans le <label> élément juste pour ajouter un balisage pour des choses comme les multiples frontières (comme l'OP dit), je pense toujours que le balisage qui doit être enveloppé dans un <button> élément la place.
    "L'étiquette de l'élément n'est pas utilisé pour la suite parce que les étiquettes de ces éléments sont fournis par la valeur de l'attribut (pour les Soumettre et les boutons Reset), l'attribut alt (pour les boutons image), ou le contenu de l'élément lui-même (bouton)." Source: w3.org/TR/WCAG20-TECHS/H44.html

    OriginalL'auteur Stephen Watkins

  2. 3

    Si le problème est de mettre le code HTML à l'intérieur de votre bouton, vous devez utiliser <button> qui vous permettra de faire exactement cela.

    <button type="submit" name="button" id="button"><img src="button.png" />Send!</button>

    Mais pour répondre à votre question à propos de la <label>: Non, cela ne marchera pas. Apparemment, il va travailler, et après y avoir réfléchi, je ne vois aucune raison pourquoi elle ne devrait pas.

    OriginalL'auteur stevelove

  3. -1

    Vous pouvez ajouter n'importe quel élément html dans l'étiquette et à l'aide de ce code, l'ensemble de l'étiquette fonctionne comme un bouton de soumission.

     <form method="" name="myForm">
        <input type="text" name="" placeholder="">
        <label for="" class="" onclick="myForm.submit() "></label>
        </form>
    Pouvez-vous revenir sur votre réponse? Poster un bout de code sans aucun texte n'est souvent pas très utile.
    Si vous souhaitez soumettre le formulaire sans bouton "soumettre", vous pouvez le faire en cliquant simplement sur l'étiquette.

    OriginalL'auteur Durgesh Pal

  4. -1

    il est difficile de style de soumettre des entrées sans l'aide d'images ou de javascript.

    Il est très facile de style entrées sans l'aide de javascript ou des images.

    à l'aide de css - style pour tous les boutons de soumission - input[type=submit] ou utiliser une classe input.submit-btn appliquée à des éléments spécifiques

    vous pouvez définir le style de la couleur, bordure, arrière-plan, le rembourrage, la position, la police de poids, les dégradés, les ombres portées..tous nombre d'effets à l'aide de css...

    voila sexy bouton -

       input[type=submit] {
        padding:4px;
        color: #fff;
        margin-top: 10px;
        background-color: #e96000;
        border: none;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
        background:  -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    -webkit ne fonctionne pas sous IE et Opera. Et vous ne pouvez pas ajouter plus d'une bordure de chaque côté.
    eh bien, mon point est qu'il est assez facile de le style d'un bouton de soumission à l'aide de css, mais vous avez raison en effet

    OriginalL'auteur Ross