Разметка веб-форм для удобства пользователей

Допустим, ваш постоянный покупатель так любит ваш сайт, что постоянно заходит в личный кабинет с различных устройств. Бывает такое. При оптовой торговле сплошь и рядом. И вот он, значит, авторизуется: с телефона, с планшета, с ноутбука и со стационарного десктопа тоже. А можно обойтись одной авторизацией? Можно.

Берем и размечаем все поля:

Вот полный пример разметки формы:

<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<label for="frmNameA">Name</label>
<input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
name@example.com" required autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required autocomplete="tel">
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
<option value="milk">
<option value="dark">
</datalist>
</fieldset>
<fieldset>
<legend>Shipping</legend>
<label for="frmAddressS">Address</label>
<input name="ship-address" required id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<label for="frmCityS">City</label><input name="ship-city" required id="frmCityS" placeholder="New York" autocomplete="shipping locality"><label for="frmStateS">State</label>
<input name="ship-state" required id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input name="ship-zip" required id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input name="ship-country" required id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label><input type="checkbox" name="billAndShip" id="cbBillAndShip"> Bill to this address.</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input name="bill-address" id="frmAddressB" required placeholder="123 Any Street" autocomplete="billing street-address"><label for="frmCityB">City</label>
<input name="bill-city" id="frmCityB" required placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input name="bill-state" id="frmStateB" required placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input name="bill-zip" id="frmZipB" required placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input name="bill-country" id="frmCountryB" required placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc"><label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>

Готово!

Удачи вам! Несколько советов по улучшению форм дала Веб-студия "АКРИТ". Разработка и продвижение сайтов на CMS «1С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.

Назад в раздел