HTML Form Examples and Server-Side Processing

Posted on Apr 27, 2025 in Computing and Communications

Web Development Examples

Euro to Peseta Converter Example (PHP)

This example demonstrates a simple server-side process using PHP to convert Euros to Spanish Pesetas. It shows how a value submitted from a form could be processed on the server.

Note: The original code snippet contained a syntax error (`$REQUEST`). The corrected logic would typically use `$_REQUEST`, `$_GET`, or `$_POST` depending on the form method.

<?php
// Assuming the form method is POST and the input name is 'cantidad'
$cantidad_euros = isset($_POST['cantidad']) ? (float)$_POST['cantidad'] : 0;
$tasa_conversion = 166.386; // Correct conversion rate
$cantidad_pesetas = $cantidad_euros * $tasa_conversion;

echo "<p>";
echo $cantidad_euros . " Euros is equal to ";
echo number_format($cantidad_pesetas, 2) . " Pesetas."; // Format output
echo "</p>";
?>

Advantages of Server-Side Processing

  • Decreases the number of files needed (logic embedded in page).
  • Allows data validation on the server side after form submission.

Procedure for Form Processing

A common pattern for handling forms on the same page:

  1. Check if the form has been submitted (e.g., check for a specific POST variable).
  2. If submitted: Process the form data.
  3. If not submitted (first load): Display the form.

The first time the page loads, the form is displayed. Subsequent loads (after submission) trigger the processing logic.

HTML Form Examples

Example 1: Basic CV Form (HTML Only)

A simple form collecting basic curriculum vitae information using various input types.

<form id="formulario" method="post" action="">
  <h4>Fill in Your CV</h4>

  <label for="nombre">Name</label><br/>
  <input type="text" id="nombre" name="nombre" value="" size="30" maxlength="30" required="required"/><br/>

  <label for="apellidos">Last Name</label><br/>
  <input type="text" id="apellidos" name="apellidos" value="" size="50" maxlength="80" /><br/>

  <label for="contrasena">Password</label><br/>
  <input type="password" id="contrasena" name="contrasena" value="" maxlength="10" required="required"/><br/>

  <label for="dni">DNI</label><br/>
  <input type="text" id="dni" name="dni" value="" size="10" maxlength="9" required="required"/><br/>

  <label>Gender</label><br/>
  <input type="radio" name="sexo" value="mujer" id="sexo_mujer" checked="checked"/> <label for="sexo_mujer">Woman</label><br/>
  <input type="radio" name="sexo" value="hombre" id="sexo_hombre"/> <label for="sexo_hombre">Man</label><br/>
  <br/>

  <label for="foto">Include My Photo</label>
  <input type="file" name="foto" id="foto" accept="image/*"/><br/>
  <br/>

  <input type="checkbox" name="suscribir" value="suscribir" id="suscribir" checked="checked"/> <label for="suscribir">Subscribe to the newsletter</label><br/>
  <br/>

  <input type="submit" name="enviar" value="Save Changes" />
  <input type="reset" name="limpiar" value="Clear Data" />
</form>

Example 2: Form with Fieldsets

This example organizes form inputs into logical groups using the <fieldset> and <legend> elements.

<form id="formulario" method="post" action="">
  <h4>Form with Fieldsets</h4>

  <fieldset>
    <legend>Personal Data</legend>
    <label for="nombre_ej2">Name</label><br/>
    <input type="text" id="nombre_ej2" name="nombre" value="" /><br/>

    <label for="apellidos_ej2">Last Name</label><br/>
    <input type="text" id="apellidos_ej2" name="apellidos" value="" /><br/>

    <label for="dni_ej2">DNI</label><br/>
    <input type="text" id="dni_ej2" name="dni" value="" size="10" maxlength="9" />
  </fieldset>

  <fieldset>
    <legend>Connection Data</legend>
    <label for="usuario_ej2">Username</label><br/>
    <input type="text" id="usuario_ej2" name="nombre_usuario" value="" maxlength="10" /><br/>

    <label for="password_ej2">Password</label><br/>
    <input type="password" id="password_ej2" name="password" value="" maxlength="10" /><br/>

    <label for="password2_ej2">Repeat Password</label><br/>
    <input type="password" id="password2_ej2" name="password2" value="" maxlength="10" />
  </fieldset>
</form>

Example 3: CV Form with Selects and Date Inputs

This example demonstrates using <select> elements for dropdowns and number inputs for date components.

<form>
  <h4>Fill in Your CV (Advanced)</h4>

  <fieldset>
    <legend>Personal Data</legend>

    <label for="provincia">Province</label> <br/>
    <select id="provincia" name="provincia">
      <option value="" selected="selected">Select</option>
      <option value="01">Álava/Araba</option>
      <option value="02">Albacete</option>
      <option value="03">Alicante/Alacant</option>
      <option value="04">Almería</option>
      <option value="33">Asturias</option>
      <option value="05">Ávila</option>
      <!-- ... other options ... -->
    </select><br/><br/>

    <label for="fecha_dia">Date of Birth</label><br/>
    <input type="number" size="3" maxlength="2" id="fecha_dia" name="fecha_dia" min="1" max="31" />
    of
    <select id="fecha_mes" name="fecha_mes">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>
    of
    <input type="number" size="5" maxlength="4" id="fecha_ano" name="fecha_ano" min="1000" max="3000"/><br/><br/>

    <label for="temasDeInteres">Topics of Interest</label> <br/>
    <select multiple="multiple" size="5" id="temasDeInteres" name="temasDeInteres">
      <option value="3105">Database Administration</option>
      <option value="3106">Analysis and Programming</option>
      <option value="3107">Architecture</option>
      <option value="3108">Quality</option>
      <option value="3109">ERP, CRM, Business Intelligence</option>
      <option value="3110">Project Management</option>
      <option value="3111">Hardware, Networks, and Security</option>
      <option value="3112">Helpdesk</option>
      <option value="3113">Systems</option>
      <option value="3114">Telecommunications</option>
    </select>
  </fieldset>
</form>