Klicken Sie hier, um zur Spalte Wulin.com HTML Tutorial zurückzukehren.
Oben: Markup -Sprache - Zitate
Originalquelle Kapitel 5 Formular
Die Interaktion stand immer im Mittelpunkt des Internets, sodass Benutzer Informationen austauschen und miteinander kommunizieren können. Mit Formularen können wir Informationen von Benutzern auf die gleiche Weise organisieren und sammeln. Bei der Gestaltung einer Website gehören wir immer zu der Kategorie, die in jeder Situation verwendet werden kann. Zum Beispiel haben wir festgestellt, dass es ungefähr 10.000 verschiedene Möglichkeiten gibt, Formen zu markieren. Vielleicht nicht so viele, aber wir können immer noch über mehrere Situationen nachdenken, um den Benutzern die Verwendung von Formularstrukturen zu erleichtern und das Management auch durch Website -Eigentümer zu erleichtern. Methoden zum Markieren von Formularen A: Verwenden von Formularen
<form action =/path/to/script methode = post>
<tabelle>
<tr>
<Th> Name: </th>
<td> <Eingabe type = text name = name /> < /td>
</tr>
<tr>
<Th> E -Mail: </th>
<td> <Eingabe type = Textname = E -Mail /> < /td>
</tr>
<tr>
<Th> & nbsp; </th>
<td> <Eingabe type = subiewvaler = sureichen /> < /td>
</tr>
</table>
</form>
Viele Menschen haben lange markierte Formen mit Tischen. Aufgrund der hohen Nutzungsfrequenz haben wir uns daran gewöhnt, auf diese Weise Formularen zu sehen: Die linke Spalte ist eine rechtsausgerichtete Textbeschreibung, und die rechte Spalte ist ein links ausgerichteter Formularelement. Die Verwendung einer einfachen Zwei-Listen-Form ist eine der einfachen Möglichkeiten, um einfach zu bedienende Formulare auszufüllen.
Einige Leute denken, dass die Form nicht benötigt wird, und andere glauben, dass die Form als Formmaterial angesehen werden sollte. Wir beabsichtigen nicht, eine der beiden Aussagen zu unterstützen, aber in einigen Fällen ist der beste Weg, um ein bestimmtes Formularlayout zu erreichen, wenn ein Formular verwendet wird, insbesondere komplexe Formulare mit vielen verschiedenen Elementen (Formulare, die Radiofelder, Dropdown-Boxen usw. verwenden). Wenn Sie sich vollständig auf CSS verlassen, um solche Formen zu verarbeiten, kann es frustrierend sein, und erfordert häufig zusätzliche <span> und <div>, um mehr Tags als die Tabelle zu konsumieren.
Schauen Sie sich als nächstes Abbildung 5-1 an. Dies ist der Effekt der allgemeinen visuellen Browser -Anzeigemethode a:
Abbildung 5-1: Auswirkung der Methode, die im Browser angezeigt wird
Sie werden feststellen, dass die Verwendung von Tabellen die Textelemente sehr ordentlich anordnen kann. Für eine so einfache Form kann ich jedoch nicht die Verwendung von Tabellen verwenden und andere Methoden verwenden, für die nicht so viele Etiketten erforderlich sind. Sofern das visuelle Design des Formulars eine solche Artensettung erfordert, ist das Formular möglicherweise nicht erforderlich. Gleichzeitig sollten wir auch mehrere Benutzerfreundlichkeit in Betracht ziehen. Wenn wir die folgenden zwei Methoden untersuchen, werden wir mit diesem Teil in Kontakt kommen.
<form action =/path/to/script methode = post>
<p>
Name: <Eingabe type = text name = name /> <br />
E -Mail: <Eingabe type = Textname = E -Mail /> <br />
<Eingabe type = Senden Wert = Senden />
</p>
</form>
Die Verwendung eines einzelnen Absatzes und ein paar <br /> -Tags ist eine praktikable Möglichkeit, alle Elemente zu trennen, aber es kann visuell ein bisschen gepresst dargestellt werden. Abbildung 5-2 Der Anzeigeeffekt der elften Version des Browsers:
Abbildung 5-2: Effekt der Browser-Anzeigemethode B
Obwohl wir das Layout abschließen können, ohne einen Tisch zu verwenden, sieht es etwas überfüllt und hässlich aus. Gleichzeitig haben wir auch das Problem gestoßen, dass Elemente nicht perfekt ausgerichtet werden können.
Mit CSS konnten wir dem <eingabe> -Element einen zusätzlichen Patch hinzufügen, um das Gefühl des Gedrängens zu erleichtern. So was:
Eingang{
Rand: 6px 0;
}
Der vorherige Absatz fügt den oberen und unteren Teilen jedes <eingabe> -Elements (einschließlich Name, E -Mail -Eingabefeld und Sendentaste) 6 Pixel zusätzlicher Patches hinzu und fügt zwischen den Elementen zusätzlichen Speicherplatz hinzu. Genau wie Abbildung 5-3:
Abbildung 5-3. Effekt der Methode B nach dem Zugabe zusätzlicher Patches zum Eingabeelement
Methode B selbst hat keine großen Probleme, aber es kann auch fein abgestimmt werden, um die Form zu verbessern. Methode C verwendet auch diese Feinabstimmungstechniken, also schauen wir uns an.
<form action =/path/to/script id = thisform methode = post>
<p> <Label für = Name> Name: < /label> <br />
<Eingabe type = text id = name name = name /> < /p>
<p> <Label für = E -Mail> E -Mail: < /Label> <br />
<Eingabe type = Text id = E -Mail -Name = E -Mail /> < /p>
<p> <Eingabetyp = Sendenwert sugeln = sureichen /> < /p>
</form>
Ich mag verschiedene Dinge über Methode C. Für eine einfache Form, die diesem Beispiel ähnlich ist, fand ich es bequemer, jede Beschreibung und jedes Formularelement in einem separaten Absatz zu platzieren. Ohne das Hinzufügen von Stilanzeigen sollte der voreingestellte Abstand zwischen den Absätzen ausreichen, damit Sie den Inhalt problemlos lesen. Später können wir das Intervall unter Verwendung von CSS als <p> -Tags festlegen, die in der Form enthalten sind.
Wir sind sogar noch einen Schritt weiter gegangen und haben eine eindeutige ID = thisform für das Formular festgelegt. Daher kann das genaue Intervall, das ich gerade erwähnt habe, grob wie folgt geschrieben werden:
#Thisform P {
Rand: 6px 0;
}
Dies bedeutet, dass das obere, untere und äußere Patches des <p> -Tags in dieser Form auf 6 Pixel festgelegt wird und die vom Browser ausgewählten voreingestellten Werte für allgemeine Absätze abdeckt.
Ein weiterer Unterschied zwischen Methode C und den ersten beiden Methoden besteht darin, dass zwar jede Gruppe (Anweisungen und Eingabefeld) in <p> platziert ist, wir sie jedoch in einer unabhängigen Linie platzieren. Mit <br /> um jedes Element zu trennen, können wir das Problem verschiedener Textlängen umgehen, was dazu führt, dass die Eingangselemente perfekt ausgerichtet sind.
Abbildung 5-4 zeigt den Effekt der allgemeinen Browser-Anzeigemethode C C, wobei die für das <p> -Tag eingestellten Stile verwendet wurden.
Abbildung 5-4. Effekt der Browseranzeigemethode C unter Verwendung von CSS für P -Tag
Zusätzlich zum visuellen Effekt der Methode C ist der wichtigste Vorteil, dass es die Benutzerfreundlichkeit verbessert.
Die Verwendung des <label> -Tags zur Verbesserung der Benutzerfreundlichkeit des Formulars erfordert zwei Schritte, und die Methode C hat diese beiden Schritte ausgeschlossen. Verwenden Sie zunächst <Label>, um die Textbeschreibung mit den relevanten Formularelementen zu verbinden, unabhängig davon, ob es sich um das Texteingangsfeld (Textfeld), das Textblockeingangsfeld (Textbereich), das Radierfeld (Radio), das Kontrollkästchen (Kontrollkästchen) usw. Methode C verwendet das <label> -TAG für den Namen: und die E -Mail: Title, verbinden sie mit den Elementen, die die Daten eingeben.
Der zweite Schritt besteht darin, das Attribut für das <Label> -Tag hinzuzufügen und die ID des entsprechenden Eingangsfelds auszufüllen.
Verwenden Sie beispielsweise in der Methode C das <Label> -Tag, um den Namen zu wickeln: und füllen Sie das für das Attribut mit dem gleichen Wert wie die Eingabefeld -ID danach aus.
<form action =/path/to/script id = thisform methode = post>
<p> <Label für = Name> Name: < /label> <br />
<Eingabe type = text id = name name = name /> < /p>
<p> <Label für = E -Mail> E -Mail: < /Label> <br />
<Eingabe type = Text id = E -Mail -Name = E -Mail /> < /p>
<p> <Eingabetyp = Sendenwert sugeln = sureichen /> < /p>
</form>
Vielleicht habe ich gehört, dass andere sagen, dass Sie das <label> -Tag in das Formular hinzufügen sollten. Die wichtigste Frage ist , warum Sie das <label> -Tag verwenden sollten.
Es ist eine gute Sache, Etiketten-/ID -Assoziationen festzulegen, mit denen Bildschirmleser das richtige Etikett für jedes Formularelement ohne den Einfluss der Layoutanordnung lesen können. Gleichzeitig wird das <label> -Tag erstellt, um Formelbalken zu markieren. Bei der Verwendung dieses Tags erklären wir die Bedeutung jedes Elements und stärken die Struktur der Form.
Bei der Verarbeitung von Einzelauswahl- und Multi-Check-Feldern besteht ein zusätzlicher Vorteil der Verwendung des <label> -Tages. Die meisten Browser ändern auch den Wert des Elements, wenn der Benutzer auf den Text in <Label> klickt. Dies kann einen größeren Klickbereich für das Eingabelement erstellen, sodass Benutzer mit Mobilitäts-Inconvenients die Formulare ausfüllen können (markieren Sie Pilgrim, Tauchen in die Barrierefreiheit , http://diveIntoaccessibility.org/day_28_labeling_form_elements.html).
Wenn Sie beispielsweise dem Formular ein Multi-Check-Box hinzufügen, damit der Benutzer diese Informationen aufschreiben kann, können wir das <Label> -Tag wie folgt verwenden:
<form action =/path/to/script id = thisform methode = post>
<p> <Label für = Name> Name: < /label> <br />
<Eingabe type = text id = name name = name /> < /p>
<p> <Label für = E -Mail> E -Mail: < /Label> <br />
<Eingabe type = Text id = E -Mail -Name = E -Mail /> < /p>
<P> <Eingabetyp = Kontrollkästchen -ID = Erinnerung Name = Erinnerung /> <Label für = Erinnere> Erinnern Sie sich an diese Informationen? </label> </p><p> <Eingabetyp = Sendenwert sugeln = sureichen /> < /p>
</form>
Durch das Markieren von Multi-Check-Boxen können zwei Vorteile erzielt werden: Der Bildschirmleser kann den richtigen erklärenden Text lesen (genau wie dieses Beispiel kann der Text nach dem Eingabefeld angezeigt werden) und der Bereich des Schaltens von Multi-Check-Boxen ist größer. Zusätzlich zu den Multi-Check-Boxen selbst ist auch der Textteil enthalten (die meisten Browser unterstützen es).
Abbildung 5-5 zeigt den Anzeigeeffekt dieser Form im Browser. Wir geben den Multi-Check-Box-Schaltbereich nach der Vergrößerung speziell an:
Abbildung 5-5. Mehrere Auswahlfelder, die Text im Schaltbereich enthalten
Zusätzlich zu den Formularen und Absätzen möchte ich auch eine andere Möglichkeit zeigen, das Formular mit der Definitionsliste zu markieren.
Vorherige Seite 1 2 3 4 Nächste Seite Lesen Sie den vollständigen Text