Der JavaScript-Artikel zeigt Ihnen, wie Sie mit Webformularen spielen

Der JavaScript-Artikel zeigt Ihnen, wie Sie mit Webformularen spielen

1. Einleitung

Zuvor haben wir die schnelle Entwicklung von Webseiten vorgestellt. Dieses Mal werden wir über etwas ausführlicheres sprechen. Bevor Sie dies lesen, sollten Sie Folgendes lesen:

Lesen Sie den vorherigen Artikel und dann diesen.

2. Haupttext

Wie in der Abbildung gezeigt: Klicken Sie auf das kleine Dreieck in der Webanwendung, bis der JSP-Speicherort angezeigt wird

Nachdem wir es erstellt haben, gibt es hier eine leere Liste von JSPs. Der Inhalt, den wir hier eingeben, wird zuerst an das Front-End zurückgesendet und dann

Back-End-Datenverarbeitung und -empfang.

Schritt 1: Lassen Sie uns hier einige Dinge eingeben, wie in der Abbildung gezeigt: <h1>Inhalt</h1> ist das Format, das angibt, dass der Inhalt in der Mitte

Ein Titel in der Größe h1. Die Größe der Titel h1-h6 nimmt allmählich ab. Seien Sie bei der Verwendung von h1 vorsichtig, da es relativ groß ist.

Nachdem wir auf diesen Lauf geklickt haben, müssen wir zu Baidu gehen, um nach localhost:8080 zu suchen und den Effekt zu sehen

Es fühlt sich ziemlich groß an, daher verwenden wir normalerweise <h2>內容</h2>

Schritt 2: Geben Sie unten den eingekreisten Inhalt ein. <input type=""> ist das Format und „txt“ bedeutet, dass sich dahinter ein Feld befindet.

Klicken Sie auf „Ausführen“, gehen Sie zu Baidu und aktualisieren Sie den vorherigen Inhalt, um den neuen Inhalt wie in der Abbildung gezeigt zu erhalten:

Wir sind jedoch der Meinung, dass dies in einer Zeile nicht gut aussieht, daher müssen wir nur einen Zeilenumbruch hinzufügen <br>

Nach dem Klicken auf Ausführen können Sie es auf Baidu aktualisieren und abrufen

Versuchen wir, Folgendes einzugeben:

Wir haben festgestellt, dass das Passwort ohne Verschlüsselung angezeigt werden kann. Wir müssen also nur txt in ein Passwort ändern.

Klicken Sie auf „Ausführen und in Baidu aktualisieren“, um Folgendes anzuzeigen:

Das Ergebnis ist wie folgt:

Sie können steuern, ob es durch das kleine Augenlogo sichtbar ist

Schritt 3: Wir müssen nur noch Name und ID hinzufügen, wobei der Doppelpunkt so etwas wie eine Kennung darstellt.

Die ID wird im vorderen Teil angezeigt, während der Name verwendet wird, wenn das Backend Daten überträgt.

Wir haben festgestellt, dass wir nach Eingabe des Kontos und des Passworts nicht absenden konnten. Daher müssen wir eine Schaltfläche festlegen, wie in der Abbildung gezeigt, um den unterstrichenen Teil einzugeben

<input type=" "> ist ein Format, „Senden“ ist eine Senden-Schaltfläche

Sie werden jedoch feststellen, dass nach dem Klicken auf „Senden“ keine Antwort erfolgt. Zu diesem Zeitpunkt müssen wir <form></form> hinzufügen, um das Ganze einzuschließen

<form></form> entspricht einem Fragebogen. Sobald Sie den Fragebogen haben, können Sie ihn absenden.

Nach dem Klicken auf „Ausführen“ wird folgende Abbildung angezeigt:

Nachdem Sie auf „Senden“ geklickt haben, wird es auf der Webseite angezeigt und die Rolle des Namens wird widergespiegelt.

Schritt 4: Da es sich um eine Ranglistenübermittlung handelt, ist es offensichtlich notwendig, eine Rangliste auszuwählen, die <option>內容</option> sein sollte.

Aber was passiert, wenn Sie mit zittriger Hand <option>內容<option> schreiben und das /? vergessen?

Es wird noch viele weitere Räume geben, und diese Räume sind optional

Dies ist sehr unpraktisch, daher ist es besser, / in den Ideencode einzufügen, wie in der Abbildung gezeigt:

Klicken Sie dann auf „Ausführen und aktualisieren“ auf Baidu.

Sie können auch verschiedene Submit-Buttons festlegen, benötigen Sie lediglich einen Wert='' '', um den Inhalt festzulegen

Wie in der Abbildung gezeigt:

Wir können auch Einzelauswahl und Mehrfachauswahl festlegen. Wie also erreichen wir dies?

Radio: Das Schlüsselwort für Radio ist „radio“. Wir wissen, dass das Format zum Festlegen einer Funktion <input type=" "> ist.

Wie in der Abbildung gezeigt:

sich herausstellen:

Wir haben festgestellt, dass alle drei ausgewählt werden können. Daher müssen wir den Namensmodifikator hinzufügen und dieselbe Richtung verwenden, um anzuzeigen, dass nur einer ausgewählt werden kann.

Diesmal ist es genau wie auf dem Bild

Wenn wir einen Standardwert hinzufügen möchten, den standardmäßig ausgewählten, müssen wir nur aktiviert hinzufügen

nach:

Multiple-Choice: Der Unterschied zwischen Multiple-Choice und Single-Choice besteht darin, dass das Radio in ein Kontrollkästchen geändert wird.

Nach dem Ausführen wie unten gezeigt:

Das ist es. Wenn wir zu nah dran sind, können wir manchmal nicht auf das Kästchen klicken und auf die chinesischen Schriftzeichen klicken, aber es gibt keine Reaktion und wir können sie nicht auswählen, also können wir

Sie können <label>內容</label> auch direkt hinzufügen, wenn Sie es auf chinesische Schriftzeichen setzen, wie in der Abbildung gezeigt

Sie können jetzt Text auswählen:

Manchmal machen wir zu viele Fehler und möchten sie nicht einzeln löschen. In diesem Fall können wir eine Reset-Taste verwenden.

Das erneute Setzen bedeutet ein Zurücksetzen. Den letzten Button ändern wir in einen Absenden-Button.

Wie in der Abbildung gezeigt:

Klicken Sie auf „Zurücksetzen“, um alles zu löschen.

Ich habe letztes Mal eine Rohfassung geschrieben.

Es gibt noch andere, von denen wir später erfahren werden.

Was Sie suchen, finden Sie hier: ❤Drei Möglichkeiten, den Backend-Datenempfang zu übersehen❤ (empfohlene Sammlung)

Auch hier: Direkter Zugriff auf die schnelle Entwicklung von groß angelegten Web-Einsteiger-Webs (❤ Empfohlene Sammlung ❤)

Dies ist das Ende dieses Artikels über JavaScript, der Ihnen beim Spielen mit Webformularseiten helfen soll. Weitere relevante JavaScript-Webformularinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • So senden Sie mit Javascript mehrere Webformulare gleichzeitig ab
  • Javascript-Methode zum gleichzeitigen Senden mehrerer Webformulare
  • JavaScript-Webformularfunktion Kommunikation voller praktischer Informationen

<<:  So führen Sie PostgreSQL mit Docker aus

>>:  Schreiben Sie eine dynamische Uhr auf einer Webseite in HTML

Artikel empfehlen

Vue verwendet Monaco, um Codehervorhebung zu erreichen

Mithilfe der Vue-Sprache und Elementkomponenten m...

Sprungcode für HTML-Seite

Speichern Sie den folgenden Code als Standard-Home...

JS realisiert die automatische Wiedergabe der Timeline

Vor kurzem habe ich einen solchen Effekt implemen...

MySQL5.7 Master-Slave-Konfigurationsbeispielanalyse

Implementierungsmethode für die MySQL5.7-Master-S...

Docker-Konfiguration Alibaba Cloud Image Acceleration Pull-Implementierung

Heute habe ich Docker verwendet, um das Image abz...

Lösung für Front-End-Browser-Schriftgrößen von weniger als 12 Pixel

Vorwort Als ich kürzlich an einem Projekt arbeite...

Warum der CSS-Attributwert clear:right im Detail nicht funktioniert

Die Verwendung der Clear-Eigenschaft zum Löschen v...

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

Vorschau: Code: Seitenabschnitte: <Vorlage>...

Analyse des Unterschieds zwischen fettgedrucktem <b> und <strong>

Wir alle Webmaster wissen, dass es bei der Optimi...