Главная » CSS3 » css3 примеры и описание их создания » Примеры - заготовки E-mail-form
51 0  

Примеры - заготовки E-mail-form

Примеры - заготовки для E-mail форм. Чистые для вставки в свой сайт.

Register for Miss Bakers Space Cadets

Personal details
Billing address
Card details
Card type

Исполняемый код:

<div> <form id="register"> <h1>Register for Miss Bakers Space Cadets</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> </div> <style> 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

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021