HTML input textfeld type=number nachkommastellen

welchen type muss man in html einem input textfeld zuweisen, sodass es nur zahlen mit 2 nachkommastellen akzeptiert?

mit type="number" kommt bei mir immer ungültiger wert wenn ich kommazahlen eingebe. sowohl mit . als auch mit ,

3 Antworten

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

05.10.2013, 16:48

Dafür gibt es kein extra Input Typ. Zumindest ist mir keiner bekannt. Du kannst aber mit dem Attribut pattern arbeiten. Das erwartet einen regulären Ausdruck, der dann mit der Eingabe verglichen wird. Nur wenn der Ausdruck passt, ist das Feld dann valid. Hier mal ein Beispiel:

<input type="text" title="Nummer im Format xxxxx,xx" name="numer" value="" pattern="\d+(,\d{2})?" required="required">

Im Title kannst Du noch eine zusätzliche Erklärung abgeben, welches Format Du erwartest. Das wird dann in der Fehlermeldung mit angezeigt, zumindest beim FF. required="required" heißt, das Feld muss unbedingt ausgefüllt sein. Das kannst Du weglassen, wenn das Feld auch leer sein darf. Die Magic passiert bei pattern. Hier wird eine Zahl erwartet, Entweder ohne Komma oder eine mit genau zwei Kommastellen. Willst Du auch eine Kommastelle zulassen, heisst die Expession so:

pattern="\d+(,\d{1,2})?"

Möchtest Du immer ein Zahl mit Komma, dann lässt Du einfach das letzte Fragezeichen weg. Das funktioniert, alles natürlich nur mit Browsern die HTML5 unterstützen. Da Du aber schon mit verschiedenen Input Typen experimentierst, gehe ich davon aus, das Du eh für moderne Browser entwickeln willst.

verreisterNutzer

04.10.2013, 21:26

JavaScript nutzen, wenn's schon unbedingt im Browser sein muss. Denn wenn du Eingaben validieren willst um sie z.B. in einem PHP-Skript weiterzuverarbeiten ist das höchst unsicher.

rj45abqz

Fragesteller

04.10.2013, 21:33

muss nicht unbedingt im browser sein und ja es ist für ein php-skript.

verreisterNutzer

04.10.2013, 21:36

@rj45abqz

Dann lass es gleich in deinem PHP-Skript überprüfen. Ist die sicherste Lösung. Parallel kannst du auch noch JavaScript im Browser nehmen, damit solche Werte von Otto-Normal-Usern gar nicht erst eingegeben werden können, aber in PHP muss es sein.

rj45abqz

Fragesteller

04.10.2013, 21:42

@verreisterNutzer

dann muss ich in php jedes einzelne zeichen des strings überprüfen oder gibt es da eine bessere methode?

verreisterNutzer

04.10.2013, 21:49

@rj45abqz

Einen regulären Ausdruck zu verwenden wäre wohl das schlauste.

Verwendung:

if(preg_match('/^\d+,\d{2}$/', $eingabe) === 1){ passt } else { passt nicht }

(Der Pattern im Beispiel erfordert eine Zahl mit mindestens einer Stelle vor dem Komma, zwangsweise Komma und genau zwei Nachkommastellen)

Such dir mal die Bücher "Mastering Regular Expressions" und "Regular Expressions Cookbook" (beide bei O'Reilly) raus, falls du damit mehr anstellen willst – RegEx ist wirklich mächtig, es ist sagenhaft wie viel man damit anstellen und sich Schreibarbeit sparen kann.

cedricface

04.10.2013, 21:07

http://forum.de.selfhtml.org/archiv/2005/6/t109590/

Hallo,

ich habe folgenden Code:

<html>
    <head></head>
    <body>
        <input type="number" id="in1" placeholder="0">
        <input type="number" id="in2" placeholder="0">
        <input type="number" id="out">
        <input type="button" value="Weiter" onclick="
            out.value = parseFloat(in1.value) + parseFloat(in2.value);
        ">
    </body>
</html>

Wenn ich in ein Feld nichts eingebe, doll Javascript den placeholder (also 0) als Inhalt ansehen und mit diesem Wert weiterrechnen. Es klappt aber leider noch nicht. Kann mir da wer helfen?

...zur Frage

Wie änder ich den style bei html input type number?

Das Problem ist nicht, die Height oder Width zu verändern, sondern dieses komische Teil, dass immer rechts in der Box ist, mit der man die Zahl verändern kann. Dieses Ding bleibt nicht proportional zu der Höhe des Inputs. Wie kann ich das ändern?

...zur Frage

Html Textfeld Anzeige korrekt?

Hallo,

ich habe mich gewundert, ob

    Name:<input type="text" name="name">

genauso richtig wäre wie

    <p>Name:<input type="text" name="name"></p>

Bisher hatte ich eigentlich keine <p>'s in solchen Fällen verwendet und die Anzeige im Browser war trotzdem fehlerfrei.

Der html-Validator hat mir auch keinen Fehler angezeigt, wenn ich das <p> weglasse. Wie seht ihr das?

...zur Frage

PHP: Ergebnis erst später aufdecken nach Antwort?

Hey,

ich habe folgenden html und php-Code.

<form action="Subtraktion (1).php" method="post" target="">
<table>
<tr>
<td><font face="Roboto Slab" size=+1>Anzahl der Aufgaben eingeben</font></td>
<td><input type="Text" name="z" value="" size="" maxlength=""></input></td>
<td align="center"><input type="submit"  style="font-family: 'Roboto Slab'"  background-color="black" name="y" value="Absenden"></td></tr>
</table>
<br>
</form>

<?php
if((isset($_POST['z'])) and (is_numeric($_POST['z'])))
{
$zahl = $_POST['z'];

{

 while($zahl>0)
  {

  $a = rand(5, 10);
  $b = rand(0, 5);
  $erg = $a - $b;
  $zahl = $zahl - 1;

  echo "<table class='Tab'>";
  echo "<table border='1'>";
  echo "<tr> <td>$a - $b = ?</td> <td><input type=\"Text\" name=\g\"  value=\"\">\n</td><td>$a - $b = $erg</td></tr>";
  echo "</table>";
}
}}

?>
</body>
</html>

Damit soll der Nutzer Aufgaben – so viel wie er anfangs ausgewählt hat, berechnet können. Die Aufgaben bestehen hierbei aus zufälligen Zahlen. Meine Frage wäre jetzt: wie ich es schaffen kann (mit eher einfachen Befehlen), den Code so zu schreiben, dass das Ergebnis – hier: $a - $b = $erg – erst enthüllt wird, sobald der Nutzer ins Textfeld seine Antwort zur Aufgabe eingegeben hat?

Hier nochmals die Stelle (auch oben zusammen mit dem gesamten Code sichtbar):

echo "<table class='Tab'>";
echo "<table border='1'>";
echo "<tr> <td>$a - $b = ?</td> <td><input type=\"Text\" name=\g\" value=\"\">\n</td><td>$a - $b = $erg</td></tr>";
echo "</table>";

Vielen Dank :)

...zur Frage

Textfeld vergrößern input html?

Hallo ich wollte fragen ob jemand weiß wie man ein Textfeld vergrößern kann? Wenn man eine input type=text hat? Also ich meine das die Höhe größer wird.

So z.b (man kann auch was reinschreiben)

...zur Frage

HTML Input verdecken?

Hallo! Ich habe in HTML einen Input von Typ Text. Man sieht den Text, aber ich möchte, das man ihn angezeigt bekommt, als wäre es ein Passwort. Also mit *****.Ich kann aufgrund meines Javascript Codes ihn aber nicht als Typ Password(also <Input type="Password"> geht nicht) abspeichern. Kann ich den Text trotzdem irgendwie verdecken?

...zur Frage

Warum wird die Seite neu geladen wenn ich etwas eingebe?

Hallo!

Ich bin nicht wirklich erfahren in PHP und lerne indem ich neue Dinge ausprobiere, kopiere, etc. Nun habe ich folgenden Code für eine Passworteingabe:

<?php
$passwort = "test";
if (isset($_POST["go"])) {
    if ($_POST["name"] == $passwort) {

    } else {

    }
} else {
    ?>
    <form class="webflow-style-input" method="post">
        <input class="popup_password" type="Password" required placeholder="Passwort eingeben" name="name">
        <input class="popup_submit" type="Submit" name="go" value=">">
    </form>
<?php } ?>

Wenn ich nun Text eingebe und ihn absende lädt die Seite neu. Weiß jemand wieso und wenn ja wie ich das abschalten kann?

...zur Frage

Der Prüfcode wird nicht akzeptiert?

Wenn ich den Prüfcode erhalte stehen dort nur Zahlen und wenn ich sie eingebe steht dann dort "Ungültiger Bestätigungscode." Könnte jemand mir bitte helfen.

...zur Frage

HTML nur input Werte akzeptieren die mit 0 beginnen?

Wie schaffe ich es bzw wie lautet der Befehl mit dem ich nur input Werte akzeptiert werden, die mit 0 beginnen?

Z.B. Handynummer

bis jetzt habe ich :

<label>Handy</label> <input type="text" minlength="4" maxlength="10" solid start value="0" pattern="[0-9]{4-10}" name="Handy">

Danke !

...zur Frage

Html Buttons mit Tastatur?

Hallo ich habe ein Input Feld mit dem Type Text und daneben eines mit dem Type Button und eigentlich funktioniert auch alles aber wenn ich im Textfeld bin und enter drücke soll das selbe passieren wie wenn ich auf den Button drücke aber stattdessen wird die Seite neu geladen?

...zur Frage

Einfacher Taschenrechner JS?

Hallo :)

Ich soll einen einfachen Taschenrechner mit Eingabefeldern erstellen, so dass er am Ende wie im Bild aussieht, ich weiß nur nicht, wie ich den <script> Teil schreiben muss, sodass er auch tatsächlich funktioniert, kann mir da jemand weiterhelfen?

Hier noch mein bisheriger Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script>
     
    </script>
  </head>
  <body>
    <h1>Taschenrechner</h1>
    <label for="number1">Zahl1:</label>
    <input id="number1" type="number">


    <label for="number2">Zahl2:</label>
    <input id="number2" type="number">


    <div>
      <button onclick="add()">+</button>
      <button onclick="subtract()">-</button>
      <button onclick="multiply()">x</button>
      <button onclick="divide()">/</button>
    </div>


    <label for="result">Ergebnis:</label>
    <input id="result" type="number">
  </body>
</html>

...zur Frage

HTML-Code für Wurzelziehen/Radizieren?

Hallo,

ich bin relativ neu im Gebiet programmieren und brauche Hilfe. In unserer Info-AG haben wir die Aufgabe bekommen, einen Taschenrechner mit den Rechenzeichen +, -, *, /, ** und √ mit einem HTML-Code zu programmieren.

Das Problem, wo ich festhänge ist das √.

Ich weiß einfach nicht, wie ich es in meinen Code einbauen kann.

Hier ist, was ich soweit habe (Wurzel-Button funktioniert wie gesagt nicht):

<!DOCTYPE html>
<html>
  <head>
    <h1>Taschenrechner</h1>
    <style>
      h1 {
        font-family: Arial;
        text-align: center;
        color: navy;
      }

      body {
        font-family: Arial;
        text-align: center;
      }

      input {
        width: 100px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <form name="Taschenrechner">
      <input type="button" value="0" onClick="document.Taschenrechner.erg.value+='0'">
      <input type="button" value="1" onClick="document.Taschenrechner.erg.value+='1'">
      <input type="button" value="2" onClick="document.Taschenrechner.erg.value+='2'">
      <input type="button" value="3" onClick="document.Taschenrechner.erg.value+='3'">
      <input type="button" value="4" onClick="document.Taschenrechner.erg.value+='4'">
      <input type="button" value="5" onClick="document.Taschenrechner.erg.value+='5'">
      <input type="button" value="6" onClick="document.Taschenrechner.erg.value+='6'">
      <input type="button" value="7" onClick="document.Taschenrechner.erg.value+='7'">
      <input type="button" value="8"
 onClick="document.Taschenrechner.erg.value+='8'">
      <input type="button" value="9"
onClick="document.Taschenrechner.erg.value+='9'">
      <label1>Rechensymbole:</label1>
      <input type="button" value="+" onClick="document.Taschenrechner.erg.value+='+'">
      <input type="button" value="-" onClick="document.Taschenrechner.erg.value+='-'">
      <input type="button" value="*" onClick="document.Taschenrechner.erg.value+='*'">
      <input type="button" value="/" onClick="document.Taschenrechner.erg.value+='/'">
      <input type="button" value="**" onClick="document.Taschenrechner.erg.value+='**'">
      <input type="button" value= "Wurzel"
onClick:="document.Taschenrechner.erg.valueMath.sqrt='x'">
      <input type="button" value="=" onClick="document.Taschenrechner.erg.value=eval(document.Taschenrechner.erg.value)">
      <label2>Ergebnis:</label2>
      <input type="textfield" id="erg" value="">
      <input type="reset" value="Reset">
    </form>
  </body>
</html>

...zur Frage

PHP – Textfeld in der Tabellenzelle "unsichtbar" machen?

Hallo, liebe Community!

Ich habe eine Tabelle in php erstellt, damit dort meine Werte und Variablen geordnet eingegeben werden können.

Wie kann ich nun das Textfeld in die Tabellenzelle so einfügen, dass es diese gesamt füllt? Also dass es sich so anfühlt, als würde ich direkt in die Zelle schreiben.

Das wäre meine bisheriger Code:

echo "<table class='Tabelle'>";

echo "<table border='1'>";

echo "<tr> <td>$a </td> <td><br><input type=\"\" style=\"border: none\" name=\"g\" value=\"\">\n</td> <td>Summe von $a - $b = $c</></tr>";

echo "</table>";

LG, Jim

...zur Frage

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen