web-dev-qa-db-fra.com

Numéro de type d'entrée HTML5

J'écris un formulaire en HTML5. Une des entrées est type=number. Je veux que l'entrée ne montre que 2 chiffres, mais elle semble afficher par défaut au moins 5 chiffres, ce qui prend de la place. J'ai essayé d'ajouter size="2" attribut, sans effet.

C'est la balise que j'utilise:

<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />

Qu'est-ce que je rate?

html5inputstylesnumbers
39
Michael Lewis

L'entrée numérique HTML5 n'a pas d'attributs de styles comme la largeur ou la taille, mais vous pouvez la styler facilement avec CSS.

input[type="number"] {
   width:50px;
}
54
zak_mckraken

Je cherchais la même solution et cela a fonctionné pour moi ... ajoutez une balise css intégrée pour contrôler la largeur de l'entrée.

Par exemple:

<input type="number" min="1" max="5" style="width: 2em;">

Combinés aux attributs min et max, vous pouvez contrôler la largeur de l'entrée.

12
user3464091

Malheureusement, en HTML 5, l'attribut 'pattern' est lié à seulement 4-5 attributs. Toutefois, si vous souhaitez utiliser un champ "texte" à la place et convertir ultérieurement en nombre, cela peut vous aider.

Ceci limite une entrée de 1 caractère (numérique) à 3.

<input name=quantity type=text pattern='[0-9]{1,3}'>

Le CSS permet essentiellement la confirmation avec un "Thumbs up" ou "Down".

Exemple 1

Exemple 2

9
Dane Balia

Il n'y a que 4 atrributes spécifiques:

  1. valeur - La valeur est la valeur par défaut de la zone de saisie lors du premier chargement d'une page. Ceci est un attribut commun pour element, quel que soit le type utilisé.
  2. min - Évidemment, la valeur minimale du nombre. J'aurais dû spécifier une valeur minimale de 0 pour ma démo, car un nombre négatif n'a pas de sens pour le nombre de films visionnés en une semaine.
  3. max - Apprentiellement, cela représente le plus grand nombre de nombres entrés.
  4. step - Facteur d'échelle de pas, la valeur par défaut est 1 si cet attribut n'est pas spécifié.

Donc, vous ne pouvez pas contrôler la longueur de quel type d'utilisateur par mot-clé. Mais la mise en œuvre des navigateurs peut changer.

3
Danil Speransky

Vous pouvez aussi remplacer l'attribut size par un attribut style:
<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />

1
Yuanga