Kamis, 31 Juli 2014

HTML5 Forms Demo

Demo Implementation


Taqaballahu minna waminkum, minal aidzin walfaidzin, mohon maaf lahir batin.
Mari kembali belajar, belajar, dan belajar. Saya akan menberikan contoh komplit sebuah forms html5, lengkap dengan penggunaan atribute dan input type. Berikut script-nya :

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Forms Complete Example</title>
    <style type="text/css">
body {
    margin: 2em 5em;
    font-family:Georgia, "Times New Roman", Times, serif;
}
h1, legend {
    font-family:Arial, Helvetica, sans-serif;
}
label, input, select {
    display:block;
}
input, select {
    margin-bottom: 1em;
}
fieldset {
    margin-bottom: 2em;
    padding: 1em;
}
fieldset fieldset {
    margin-top: 1em;
    margin-bottom: 1em;
}
input[type="checkbox"] {
    display:inline;
}
.range {
    margin-bottom:1em;
}   
.card-type input, .card-type label {
    display:inline-block;
}
    </style>   
</head>
<body>
<form id="register">
<h1>Register Form</h1>
  <fieldset>
    <legend>Personal details</legend>
    <div>
        <label>First Name
        <input id="given-name" name="given-name" type="text" placeholder="First name only" required autofocus>
        </label>
    </div>
    <div>
        <label>Last Name
        <input id="family-name" name="family-name" type="text" placeholder="Last name only" required autofocus>
        </label>
    </div>
    <div>
        <label>Date of Birth
        <input id="dob" name="dob" type="date" required>
        </label>
    </div>
    <div>
        <label>Email
        <input id="email" name="email" type="email" placeholder="example@domain.com" required>
        </label>
    </div>
    <div>
        <label>URL
        <input id="url" name="url" type="url" placeholder="http://mysite.com">
        </label>
    </div>   
    <div>
        <label>Telephone
        <input id="phone" name="phone" type="tel" placeholder="Eg. +447000 000000" required>
        </label>
    </div>
    <div>
        <label>Shoesize
        <input id="shoes" name="shoes" type="number" min="5" max="18" step="0.5" value="9">
        </label>
    </div>
    <div>
        <label>Flying Skill level (1 low - 100 high)
        <input id="skill" name="skill" type="range" min="1" max="100" value="0">
        <output name="output" onforminput="value=a.value">0</output>
        </label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Billing address</legend>
    <div>
        <label>Address
        <textarea id="address" name="address" rows=5 required></textarea>
        </label>
    </div>
    <div>
        <label>Post code
        <input id="postCode" name="postCode" type="text" required>
        </label>
    </div>
    <div>
        <label>Country
        <input id="country" name="country" list="country-names" type="text" required>
        <datalist id="country-names">
            <option label="England" value="England"></option>
            <option label="Northern Ireland" value="Northern Ireland"></option>
            <option label="Ireland" value="Ireland"></option>
            <option label="Scotland" value="Scotland"></option>
            <option label="Wales" value="Wales"></option>
        </datalist>
        </label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Card details</legend>
    <fieldset>
      <legend>Card type</legend>
      <div class="card-type">
          <input id="visa" name="cardtype" type="radio">
          <label for="visa">VISA</label>
          <input id="mastercard" name="cardtype" type="radio">
          <label for="mastercard">Mastercard</label>
          <input id="amex" name="cardtype" type="radio">
          <label for="amex">AMEX</label>
      </div>
    </fieldset>
    <div>
        <label>Name
        <input id="cardName" name="cardName" type="text" placeholder="Name as it appears on your card" required>
        </label> 
    </div>
    <div>
        <label>Card number
        <input id="cardNo" name="cardNo" type="number" required title="The sixteen digit number across the middle of your card.">
        </label>
    </div>
    <div>
        <label>Security code
        <input id="security" name="security" type="number" required pattern="[0-9]{3}" title="The last three digits on the back of your card.">
        </label>
    </div>
    <div>
        <label>Expiry Date
        <input id="expiry" name="expiry" type="month">
        </label>
    </div>
  </fieldset>
  <fieldset>
      <div>
        <button type=submit>Place Order</button>
    </div>
  </fieldset>
</form>
</body>
</html>


Forms Complete Example

Register Form

Personal details
Billing address
Card details
Card type

0 komentar:

Posting Komentar

 

Deryan E.M. Copyright © 2011 | Template design by O Pregador | Powered by Blogger Templates