如何制作此类表单？如何使用XML创建同款表单？

架构老林

2026-5-22

Hey there! Let's tackle your two questions one by one—first building a form that matches your sample style, then creating that same form using XML. I'll keep this practical and easy to follow.

1. Building a Form Matching Your Sample Style

Assuming your sample form is a clean, structured one with aligned labels, consistent input styling, and clear action buttons (adjust the code below if your sample has unique elements like checkboxes or dropdowns), we'll use HTML + CSS to replicate it:

Step 1: Lay Out the HTML Structure

Start with semantic HTML to define the form's core elements:

<form class="sample-form">
  <fieldset>
    <legend>User Information</legend>
    <div class="form-group">
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
      <label for="email">Email Address:</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
      <label for="phone">Phone Number:</label>
      <input type="tel" id="phone" name="phone">
    </div>
    <div class="form-actions">
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </div>
  </fieldset>
</form>

Step 2: Add CSS to Match the Sample Style

Tweak the values here to match your sample's specific look (e.g., colors, spacing, borders):

.sample-form {
  max-width: 500px;
  margin: 2rem auto;
  padding: 1.5rem;
  font-family: Arial, sans-serif;
}

.sample-form fieldset {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

.sample-form legend {
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0 0.5rem;
}

.form-group {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-group label {
  width: 120px;
  text-align: right;
  font-weight: 500;
}

.form-group input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.form-actions button {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.form-actions button[type="submit"] {
  background-color: #007bff;
  color: white;
}

.form-actions button[type="reset"] {
  background-color: #6c757d;
  color: white;
}

2. Creating the Same Style Form Using XML

XML is a markup language for defining structure/data—not directly for rendering styles. We'll pair it with other tools to get a styled form, covering two common use cases:

Scenario 1: XML + XSLT for Web Forms

Use XML to define the form's fields, then XSLT to convert it into styled HTML.

Step 1: Define the Form in XML

<form-definition>
  <title>User Information</title>
  <fields>
    <field>
      <label>Full Name:</label>
      <type>text</type>
      <id>name</id>
      <name>name</name>
      <required>true</required>
    </field>
    <field>
      <label>Email Address:</label>
      <type>email</type>
      <id>email</id>
      <name>email</name>
      <required>true</required>
    </field>
    <field>
      <label>Phone Number:</label>
      <type>tel</type>
      <id>phone</id>
      <name>phone</name>
      <required>false</required>
    </field>
  </fields>
  <actions>
    <submit>Submit</submit>
    <reset>Reset</reset>
  </actions>
</form-definition>

Step 2: Transform XML to Styled HTML with XSLT

This XSLT will generate the same HTML/CSS form from the XML above:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <head>
        <style>
          .sample-form {
            max-width: 500px;
            margin: 2rem auto;
            padding: 1.5rem;
            font-family: Arial, sans-serif;
          }
          .sample-form fieldset {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 1.5rem;
          }
          .sample-form legend {
            font-weight: bold;
            font-size: 1.2rem;
            padding: 0 0.5rem;
          }
          .form-group {
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
          }
          .form-group label {
            width: 120px;
            text-align: right;
            font-weight: 500;
          }
          .form-group input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
          }
          .form-group input:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
          }
          .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 1.5rem;
          }
          .form-actions button {
            padding: 0.5rem 1.2rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
          }
          .form-actions button[type="submit"] {
            background-color: #007bff;
            color: white;
          }
          .form-actions button[type="reset"] {
            background-color: #6c757d;
            color: white;
          }
        </style>
      </head>
      <body>
        <form class="sample-form">
          <fieldset>
            <legend><xsl:value-of select="form-definition/title"/></legend>
            <xsl:for-each select="form-definition/fields/field">
              <div class="form-group">
                <label for="{id}"><xsl:value-of select="label"/></label>
                <input type="{type}" id="{id}" name="{name}">
                  <xsl:if test="required='true'">
                    <xsl:attribute name="required"></xsl:attribute>
                  </xsl:if>
                </input>
              </div>
            </xsl:for-each>
            <div class="form-actions">
              <button type="submit"><xsl:value-of select="form-definition/actions/submit"/></button>
              <button type="reset"><xsl:value-of select="form-definition/actions/reset"/></button>
            </div>
          </fieldset>
        </form>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Use a browser or XSLT processor to combine the XML and XSLT into a working form.

Scenario 2: XML for Android Layout Forms

If you're building for Android, XML directly defines the layout. Here's the equivalent form:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gap="16dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User Information"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <!-- Full Name -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:alignItems="center"
            android:gap="16dp">

            <TextView
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:text="Full Name:"
                android:textStyle="500"/>

            <EditText
                android:id="@+id/name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="Enter your name"
                android:inputType="textPersonName"
                android:required="true"/>
        </LinearLayout>

        <!-- Email -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:alignItems="center"
            android:gap="16dp">

            <TextView
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:text="Email Address:"
                android:textStyle="500"/>

            <EditText
                android:id="@+id/email"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="Enter your email"
                android:inputType="textEmailAddress"
                android:required="true"/>
        </LinearLayout>

        <!-- Phone -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:alignItems="center"
            android:gap="16dp">

            <TextView
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:text="Phone Number:"
                android:textStyle="500"/>

            <EditText
                android:id="@+id/phone"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="Enter your phone"
                android:inputType="phone"/>
        </LinearLayout>

        <!-- Buttons -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="end"
            android:gap="8dp">

            <Button
                android:id="@+id/submit_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Submit"
                android:backgroundTint="#007bff"
                android:textColor="@android:color/white"/>

            <Button
                android:id="@+id/reset_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Reset"
                android:backgroundTint="#6c757d"
                android:textColor="@android:color/white"/>
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Adjust attributes like android:backgroundTint or android:textSize to match your sample's style.

内容的提问来源于stack exchange，提问作者Toka A. Amin

如何制作此类表单？如何使用XML创建同款表单？

Step 1: Lay Out the HTML Structure #

Step 2: Add CSS to Match the Sample Style #

Scenario 1: XML + XSLT for Web Forms #

Step 1: Define the Form in XML #

Step 2: Transform XML to Styled HTML with XSLT #