Einstellen der Größe eines Feldes
Wie wir gesehen haben, haben wir zwei Attribute, die sich direkt auf die Größe eines Feldes auswirken: Größe und Maximallänge . Das eine reguliert die visuelle Amplitude des Feldes und das andere die Textmenge, die das Feld effektiv empfangen kann.
Sehen wir uns ein Beispiel mit beiden Attributen an:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> <form method = "post" action = "http: // titan: 8080 / form"> <p> <label for = "name"> Name: <Eingabe maxlength = "10" id = "name" name = "name" /> </ label> </ p> <p> <label for = "city"> Stadt: <input size = "10" id = "city" name = "city" /> </ label> </ p> <p> <label for = "fave"> Frucht: <input size = "10" maxlength = "10" id = "fave" name = "fave" /> </ label> </ p> <button type = "submit"> Stimme abgeben </ button> </ form> </ body> </ html>
In diesem Beispiel sehen wir, wie das erste Feld mit einer maximalen Länge angegeben wird. Nur mit dieser Option teilen wir dem Browser mit, dass es nur 10 Zeichen annehmen kann. Sie können jedoch standardmäßig die Breite zuweisen. Im zweiten Feld geben wir die Größe mit unseren Worten an Wie breit es sein sollte, aber wir beschränken die Texteingabe nicht und im dritten Fall wenden wir beide Bedingungen an, lassen Sie uns sehen, wie wir uns im Browser befinden.
Verwendung von Wert und Platzhalter
Nachdem wir den Unterschied zwischen diesen beiden Feldern gesehen haben, zeigen wir in diesem Beispiel auf effektive Weise, wie sie auf ein Formular angewendet werden, und sehen uns im folgenden Code an, wie sie verwendet werden.
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> <form method = "post" action = "http: // titan: 8080 / form"> <p> <label for = "name"> Name: <input placeholder = "Ihr Name" id = "name" name = "name" /> </ label> </ p> <p> <label for = "city"> Stadt: <input placeholder = "Wo Sie wohnen" id = "Stadt" name = "Stadt" /> </ label> </ p> <p> <label for = "fave"> Frucht: <input value = "Apple" id = "fave" name = "fave" /> </ label> </ p> <button type = "submit"> Stimme abgeben </ button> </ form> </ body> </ html>
Wie wir in den ersten beiden Feldern sehen, gibt der Platzhalter eine Hilfe für die Eingabe des Benutzers an. Dieser Wert, der den Platzhalter enthält, ist nicht der Wert des Eingabefelds. Wenn wir diese Felder übermitteln, wird stattdessen das dritte Feld leer angezeigt Es wurde bereits etwas in das value-Attribut eingefügt. Dies würde passieren, wenn Sie sich an dieses Formular wenden.
Mal sehen, wie uns der Browser dies zeigen würde
Erstellen Sie schreibgeschützte Felder
Manchmal müssen wir mit schreibgeschützten Feldern arbeiten, entweder weil der Wert vom Benutzer nicht geändert werden sollte oder nur informativ ist. Es kann auch der Fall sein, dass es das Ergebnis einer vorherigen Filterung durch den Benutzer ist und nur dieser Wert angezeigt wird. Dafür haben wir zwei Optionen, die, auch wenn sie gleich aussehen, völlig unterschiedlich sind.
Wir hatten das Attribut bereits als schreibgeschützt gesehen und wissen, dass es so ist, dass das Feld nicht geändert werden kann. Wir haben auch das Attribut disabled . Es hat die gleiche Funktion wie readonly . Beim Senden werden jedoch nicht alle deaktivierten Felder gesendet, so als ob existierte nicht in der Form.
Lassen Sie uns das oben erläuterte anhand eines praktischen Beispiels sehen.
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> <form method = "post" action = "http: // titan: 8080 / form"> <p> <label for = "name"> Name: <input value = "Adam" disabled id = "name" name = "name" /> </ label> </ p> <p> <label for = "city"> Stadt: <Eingabewert = "Boston" readonly id = "Stadt" name = "Stadt" /> </ label> </ p> <p> <label for = "fave"> Frucht: <input id = "fave" name = "fave" /> </ label> </ p> <button type = "submit"> Stimme abgeben </ button> </ form> </ body> </ html>
Wir können sehen, dass das erste Feld deaktiviert ist und das zweite Feld schreibgeschützt ist. Wenn das deaktivierte Feld im Browser angezeigt wird, ist es grau, normalerweise wird es nicht aktiviert, während das schreibgeschützte Feld wie ein normales Feld aussieht schreiben Sie in einem, keiner wird uns Text eingeben lassen.
Mal sehen, wie wir das Beispiel haben:
Damit beenden wir den zweiten Teil des Tutorials. Wir sind bereits in der Lage, unsere Formulare mithilfe grundlegender Überprüfungen von Größe und Textmenge zu verbessern und zu steuern, ob der Benutzer Änderungen vornehmen oder nicht. Außerdem können wir ihm in den Feldern Hilfe zeigen, damit er eine Idee hat was soll oder soll nicht eintreten.