Fallstudie PHP Web Form Builder

Dieser Artikel beschreibt den PHP-Webformulargenerator anhand von Beispielen. Teilen Sie es wie folgt mit allen als Referenz:

1. Beispiel:

Verwandte Lernempfehlungen: PHP-Programmierung ab Eintrag bis Kompetent

2. Anforderungsanalyse

Bei der eigentlichen Entwicklung von Projekten ist es oft notwendig, verschiedene Formen zu entwerfen. Obwohl es einfach ist, HTML-Formulare direkt zu schreiben, ist es relativ mühsam, sie zu ändern und zu warten.
Daher können Sie mit PHP einen Web-Formulargenerator implementieren, sodass Sie Formulare mit unterschiedlichen Funktionen entsprechend den spezifischen Anforderungen anpassen können. Die spezifischen Implementierungsanforderungen lauten wie folgt:

• Verwenden Sie mehrdimensionale Arrays, um formularbezogene Informationen zu speichern
• Zu den unterstützten Formularelementen gehören Textfelder, Textfelder, Optionsfelder, Kontrollkästchen und 5 Arten von Dropdown-Listen
• Speichern Sie Tag, Eingabeaufforderungstext, Attribute, Optionswerte, Standardwerte usw. jedes Formularelements
• Kapseln Sie die Funktion in eine Funktion und Generieren Sie das angegebene Formular basierend auf den übergebenen Parametern

Die Art und Weise, wie die Daten gespeichert werden, bestimmt die Art und Weise, wie das Programm implementiert wird.
Daher kann gemäß den oben genannten Entwicklungsanforderungen jedes Formularelement als Array-Element verwendet werden, und jedes Element wird durch ein assoziatives Array beschrieben, das aus Folgendem besteht: Tag, Eingabeaufforderungstext, Attribut-Array-Attribut, Option-Array-Option usw Standardwert.

3. Fallimplementierung

Vorbereiten des Formulars

Die Hauptfunktion des Formulars: auf Der zur Eingabe von Informationen verwendete Bereich der Webseite sammelt die vom Benutzer eingegebenen Informationen und übermittelt sie zur Verarbeitung an den Back-End-Server, um die Interaktion zwischen dem Benutzer und dem Server zu realisieren.
Zum Beispiel: Einkaufsabwicklung, Informationssuche usw. werden alle über Formulare implementiert.

2. Formular vorbereiten – Formular erstellen

Ein vollständiges Formular besteht aus Formularfeldern und Formularsteuerelementen. Unter diesen wird das Formularfeld durch das Formular-Tag definiert und zum Sammeln und Übertragen von Benutzerinformationen verwendet.

<form action="form.php" method="post" enctype="multipart/form-data">
  <!-- 各种表单控件 -->
</form>

„>“ ist ein HTML-Kommentar-Tag, das zur Erklärung und Beschreibung verwendet wird.

• Der Wert des Aktionsattributs kann ein absoluter Pfad oder ein relativer Pfad sein. Wenn dieses Attribut weggelassen wird, bedeutet dies, dass es an den aktuellen Pfad gesendet wird Datei zur Bearbeitung.
  Das von der GET-Methode übergebene Formular ist in der URL-Adressleiste sichtbar.
  Im Vergleich zur GET-Methode sind die von der POST-Methode übermittelten Daten während der Interaktion unsichtbar und relativ sicher. Daher wird POST normalerweise zum Übermitteln von Formulardaten verwendet.
• Der Standardwert des enctype-Attributs ist application/x-www-form-urlencoded, was bedeutet, dass alle Zeichen vor dem Senden der Formulardaten codiert werden. Darüber hinaus kann er auch auf „multipart/form-data“ (POST-Modus) eingestellt werden, um anzugeben, dass keine Zeichenkodierung durchgeführt wird. Insbesondere Formulare, die Datei-Uploads enthalten, müssen diesen Wert auf „text/plain“ (POST-Modus) setzen, um normalen Text zu übertragen .

3. Bereiten Sie das Formular vor – Formularsteuerelement

//input控件
<input type="text" name="user" value="test">  <!-- 文本框 -->
<input type="password" name="pwd" value="">       <!-- 密码框 -->
<input type="file" name="upload">             <!-- 文件上传域 -->
<input type="hidden" name="id" value="2">         <!-- 隐藏域 -->
<input type="reset" value="重置">           <!-- 重置按钮 -->
<input type="submit" value="提交">          <!-- 提交按钮 -->

• Legen Sie verschiedene Werte für das Typattribut fest, um unterschiedliche Formularsteuerelementnamen zu erhalten Attribut wird verwendet Geben Sie den Namen des Steuerelements an, um mehrere identische Steuerelemente im Formular zu unterscheiden
• Das Wertattribut wird verwendet, um den Standardwert des Formularsteuerelements festzulegen

• //input控件
  <!-- 单选框 -->
  <input type="radio" name="gender" value="m" checked> 男
  <input type="radio" name="gender" value="w"> 女
  <!-- 复选框 -->
  <input type="checkbox" name="hobby[]" value="swimming"> 游泳
  <input type="checkbox" name="hobby[]" value="reading"> 读书
  <input type="checkbox" name="hobby[]" value="running"> 跑步

Das aktivierte Attribut wird verwendet, um das standardmäßige ausgewählte Element festzulegen

• //textarea控件
  <textarea name="introduce" cols="5" rows="10">
  <!-- 文本内容 -->
  </textarea>

Das Textbereichssteuerelement eignet sich für Selbstbewertung, Kommentare und andere Funktionen, die möglicherweise die Eingabe einer großen Menge an Informationen erfordern

• Die Attribute cols und rows werden verwendet, um die Höhe und Breite des Textbereichs zu definieren

• //select控件
  <select name="area">
    <option selected>--请选择--</option>
    <option value="Beijing">北京</option>
    <option value="Shenzhen">深圳</option>
    <option value="Shanghai">上海</option>
  </select>

select ist das Tag, das die Dropdown-Liste definiert

• option ist das Tag, das die spezifischen Optionen in der Dropdown-Liste definiert
• Das ausgewählte Attribut wird verwendet, um das standardmäßig ausgewählte Element festzulegen
4 Bereiten Sie das Formular-Label-Tag vor

Um eine bessere Benutzererfahrung zu bieten, werden beim Schreiben von Formularsteuerelementen häufig Eingabesteuerelemente in Verbindung mit Beschriftungs-Tags verwendet. Erweitern Sie die Auswahl an Steuerelementen.

Klicken Sie beispielsweise bei der Auswahl des Geschlechts auf den Eingabeaufforderungstext „Männlich“ oder „Weiblich“ oder wählen Sie das entsprechende Optionsfeld aus.
Verwenden Sie Label-Tags, um Optionsfelder und Eingabeaufforderungstext einzuschließen, sodass beim Klicken auf den Inhalt im Label-Tag das entsprechende Formularsteuerelement ausgewählt wird.

<strong><label><input type="radio" name="gender" value="m">男</label>
<label><input type="radio" name="gender" value="w">女</label></strong>

5. Mehrdimensionales Array

Entsprechend der Bedarfsanalyse des Falles werden die relevanten Daten der Formularelemente einheitlich in einem mehrdimensionalen Array gespeichert . Unter diesen werden numerische Schlüsselnamen zur Unterscheidung verschiedener Formularelemente verwendet, und jedes Formularelement ist ein zweidimensionales assoziatives Array.

<strong>// 利用多维数组保存表单元素
[
  0 => [],   // 表单项---单选按钮
  1 => [],   // 表单项
  2 => [],   // 表单项---文本框
  3 => [],   // 表单项
  ……
];</strong>

<strong>// 每个表单项的数组结构
0 => [
  &#39;tag&#39; => &#39;&#39;,   // 标记----input、textarea、select
  &#39;text&#39; => &#39;&#39;,  // 提示文本----label标签内显示的内容
  &#39;attr&#39; => [],  // 属性数组----表单元素的属性，如type
  &#39;option&#39; => [],    // 选项数组----单选框或复选框中的每个选项
  &#39;default&#39; => &#39;&#39;    // 默认值----默认值
],</strong>

<strong>//准备表单数组
// $elements数组保存整个表单
$elements = [
  0 => [],       // 第1个表单项数组
  1 => [],       // 第2个表单项数组
];</strong>

<strong>//文本框
0 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;text&#39; => &#39;姓　　名：&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;text&#39;, &#39;name&#39; => &#39;user&#39;]
],</strong>

<strong>//单选框
3 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;text&#39; => &#39;性　　别：&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;radio&#39;, &#39;name&#39; => &#39;gender&#39;],
  &#39;option&#39; => [&#39;m&#39; => &#39;男&#39;, &#39;w&#39; => &#39;女&#39;],
  &#39;default&#39; => &#39;m&#39;
 ],</strong>

Option verwendet ein assoziatives Array, um bestimmte Radiooptionen zu speichern, und die entsprechenden Werte „männlich“ und „ weiblich" sind die einzelnen Optionen. Die Eingabeaufforderungsinformationen der Option

Der Standardwert ist ein Schlüsselname im assoziativen Array der Option, der angibt, welches Element standardmäßig ausgewählt ist

<strong>//复选框
4 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;text&#39; => &#39;爱　　好：&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;checkbox&#39;, &#39;name&#39; => &#39;hobby[]&#39;],
  &#39;option&#39; => [&#39;swimming&#39; => &#39;游泳&#39;, &#39;reading&#39; => &#39;读书&#39;, &#39;running&#39; => &#39;跑步&#39;],
  &#39;default&#39; => [&#39;swimming&#39;, &#39;reading&#39;]
],</strong>

<strong>//下拉列表
5 => [
  &#39;tag&#39; => &#39;select&#39;,
  &#39;text&#39; => &#39;住　　址：&#39;,
  &#39;attr&#39; => [&#39;name&#39; => &#39;area&#39;],
  &#39;option&#39; => [&#39;&#39; => &#39;--请选择--&#39;, &#39;BJ&#39;=>&#39;北京&#39;, &#39;SH&#39;=>&#39;上海&#39;, &#39;SZ&#39;=>&#39;深圳&#39;]
],</strong>

<strong>//文本域
6 => [
  &#39;tag&#39; => &#39;textarea&#39;,
  &#39;text&#39; => &#39;自我介绍：&#39;,
  &#39;attr&#39; => [&#39;name&#39; => &#39;introduce&#39;, &#39;cols&#39; => 50, &#39;rows&#39; => 5]
],</strong>

<strong>//提交按钮
7 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;submit&#39;, &#39;value&#39; => &#39;提交&#39;]
]</strong>

Automatische Generierung von das Formular

1. Formular Automatische Generierung – Lesen des $elements-Arrays

Implementierungsideen

• Um die Verarbeitung der vom Benutzer übermittelten Daten zu erleichtern, wird jedes Formularelement in $elements mit dem angegebenen Array zusammengeführt, sodass jedes Formularelement fünf Schlüssel enthält: Tag, Text, Attr, Option und Standardelemente in der gleichen Reihenfolge.
• Je nach Tag-Wert rufen Sie die Funktionen mit dem Präfix „generate_“ auf, um die Formularelemente zu verbinden
• Jedes Formularelement belegt eine Zeile und gibt das zusammengefügte Formular zurück

2. Automatische Generierung von Formularen – Zusammenfügen von Attributen von Formularelementen

Implementierungsideen

• Definieren Sie die Funktion generic_attr($attr, $items = ' ' ) wird verwendet, um das Zusammenfügen von Formularelementattributen abzuschließen
• Der Schlüssel des Elements im $attr-Array ist der Attributname und der Wert des Elements ist der Wert des Attributs
• Vervollständigen Sie das Zusammenfügen von Attributen und $items durch Durchlaufen und Zurückgeben, z. B. type="radio" name="gender"

Automatische Generierung von Formularen – Zusammenfügen von Eingabeelementen

Implementierungsideen

• Bestimmen Sie, ob es sich um eine Einzelauswahl oder eine Mehrfachauswahl handelt, je nachdem, ob es Optionselemente enthält
• Wenn nicht, rufen Sie die Attributfunktion direkt auf um das Zusammenfügen von Formularelementen abzuschließen
• Wenn ja, nacheinander durchlaufen. Vervollständigen Sie das Zusammenfügen mehrerer Optionen und kehren Sie zurück
  

4. Automatische Generierung von Formularen – Verbindungsauswahl Elemente

Implementierungsideen

• Spleißen Sie die Optionsoption der Dropdown-Liste zusammen
• Schließen Sie das vollständige Spleißen des ausgewählten Tags ab und kehren Sie zurück

5. Automatische Generierung des Formulars – Zusammenfügen von Textbereichselementen

Implementierungsideen

• Zusammenfügen der Attribute von das Textarea-Element
• Textarea vollständig zusammenfügen und zurückgeben
  

Das obige ist der detaillierte Inhalt vonFallstudie PHP Web Form Builder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!