mozilla
Your Search Results

    Example Redirect 2

    This the example for a basic payment form for the article How to structure an HTML form.

    A payment form

    HTML Content

    <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
      <h1>Payment form</h1>
      <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
     
      <section>
      <h2>Contact information</h2>
     
      <fieldset>
        <legend>Title</legend>
        <ul>
        <li>
          <label for="title_1">
          <input type="radio" id="title_1" name="title" value="M." />
          Mister
          </label>
        </li>
        <li>
          <label for="title_2">
          <input type="radio" id="title_2" name="title" value="Ms." />
          Miss
          </label>
        </li>
        </ul>
      </fieldset>
     
      <p>
        <label for="name">
        <span>Name: </span>
        <input type="text" id="name" name="username" required />
        <strong><abbr title="required">*</abbr></strong>
        </label>
      </p>
     
       <p>
        <label for="mail">
        <span>E-mail: </span>
        <input type="email" id="mail" name="usermail" required />
        <strong><abbr title="required">*</abbr></strong>
        </label>
      </p>
      </section>
     
      <section>
      <h2>Payment information</h2>
     
      <p>
        <label for="card">
        <span>Card type:</span>
        <select id="card" name="usercard">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
        </label>
      </p>
      <p>
        <label for="number">
        <span>Card number:</span>
        <input type="text" id="number" name="cardnumber" required />
        <strong><abbr title="required">*</abbr></strong>
        </label>
      </p>
      <p>
        <label for="date">
        <span>Expiration date:</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="required">*</abbr></strong>
        <em>formated as mm/yy</em>
        </label>
      </p>
      </section>
     
      <section>
      <p>
        <button>Validate the payment</button>
      </p>
      </section>
    </form>

    CSS Content

    h1 {
      margin-top: 0;
    }
    
    ul {
      margin : 0;
      padding: 0;
      list-style: none;
    }
    
    form {
      margin: 0 auto;
      width : 400px;
    
      padding: 1em;
      border : 1px solid #CCC;
      border-radius: 1em;
    }
    
    div + div {
      margin-top: 1em;
    }
    
    label span{
      display: inline-block;
      width  : 120px;
      text-align: right;
    }
    
    input, textarea {
      font: 1em sans-serif;
    
      width: 250px;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
    
      border: 1px solid #999;
    }
    
    input[type=checkbox], input[type=radio] {
      width : auto;
      border: none;
    }
    
    input:focus, textarea:focus {
      border-color: #000;
    }
    
    textarea {
      vertical-align: top;
    
      height: 5em;
    
      resize: vertical;
    }
    
    fieldset {
      width: 250px;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
    
      margin-left: 124px;
     
      border: 1px solid #999;
    }
    
    button {
      margin-left: 124px;
    }

    Result

     

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,