Заготовка для форми з новими фішками HTML5
Чиста заготовка для форми з різними елементами FORM, INPUT, TEXTAREA, SELECT, OPTION и BUTTON + нові фішки для форм та полів в HTML5
Приклад готової форми - дивитись
<form>
<fieldset>
<legend>Контактна інформація</legend>
<div>
<label for="name">Ім'я <em>*</em></label>
<input type="text" id="name">
</div>
<div>
<label for="email">E-mail</label>
<input type="email" id="email">
</div>
<div>
<label for="tel">Ваш телефон</label>
<input type="tel" id="telefon">
</div>
</fieldset>
<div><!-- перемикач на вибір тільки одного значення -->
<s><input checked type="radio" name="cvet" value="red"> Червоний</s>
<s><input type="radio" name="cvet" value="darck"> Чорний</s>
</div>
<div><!-- прапорці множинний вибір -->
<s><input checked type="checkbox" name="vibor1" value="yes"> Название 1</s>
<s><input type="checkbox" name="vibor2" value="yes"> Название 2</s>
<s><input type="checkbox" name="vibor3" value="yes"> Название 3</s>
</div>
<div>
<input type="file" name="foto"> <!-- Загрузка картинки -->
</div>
<div>
<textarea name="text"></textarea> <!-- поле для текста -->
</div>
<div>
<select name="vidos"> <!-- Випадаючий список -->
<option valu="vid1">Значенння 1</option>
<option valu="vid2">Значення 2</option>
<option valu="vid3">Значення 3</option>
</select>
</div>
<button type="submit" value="Надіслати"></button>
</form>
<input type="hidden">
Елементи <input> типу hidden дозволяють веб-розробникам включати дані, які користувачі не можуть побачити або змінити під час надсилання форми. Наприклад, ідентифікатор вмісту, який зараз замовляється або редагується, або унікальний маркер безпеки. Приховані введення абсолютно невидимі на відтвореній сторінці, і немає способу зробити їх видимими у вмісті сторінки.
Можна зробити заборону на відправку форми доки не поставлено чекбокс:
<div class="form__checkbox">
<input id="checkbox" type="checkbox" name="checkbox" onchange="document.getElementById('submit').disabled = !this.checked;" />
<label for="checkbox">Підтверджую свою згоду</label>
<input type="submit" disabled="disabled" name="submit" id="submit" value="Надіслати" />
</div>
<style>
.form__checkbox input[type=checkbox] {display: inline-block; width:20px; height:20px; float:left; margin:0 8px 0 0;cursor:pointer;}
.form__checkbox input[type=checkbox] + label {display: block;position: relative;cursor: pointer;}
.form__checkbox input[disabled] {opacity:.6; cursor: not-allowed;}
.form__checkbox input[type=checkbox] .butoon {cursor:pointer;}
.form__checkbox input{cursor:pointer;}
</style>PHP обробка форми:
$template = "
<html>
<style>
*{font-family: Arial;}
table{border-collapse: collapse;}
td{padding: 5px; border: 1px solid #000;}
th{background: #999; padding: 5px;}
</style>
<body>
<h1>".$subject."</h1>
".$mail."</body>
</html>";
$template .= '<hr>' . $_SERVER['HTTP_REFERER'];
// Clear form
$head = "<tr><th>ID</th><th>Название</th><th>Цена</th><th>Кол-во</th><th>Всего</th></tr>";
$template = str_replace ( "<tbody>" ,"<tbody>".$head, $template);
$domain = "webinside.ru";
$from = "no-reply@". $domain;
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $from . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
$success = mail("z_evgen@mail.ru", $subject, $template, $headers);
echo ($success) ? 'true' : 'false';Атрибут autocomplete
При включенні атрибуту autocomplete знову викликаються раніше введені користувачем дані, які автоматично вводяться в поля як
пропозиція. Цю властивість також можна вимкнути шляхом перемикання autocomplete на off. У наступному коді показано, як увімкнути autocomplete для всієї форми, але відключити цей атрибут для конкретних полів (off):
<form action='myform.php' method='post' autocomplete='on'>
<input type='text' name='username'>
<input type='password' name='password' autocomplete='off'>
</form>Атрибут autofocus
Атрибут autofocus призводить до моментального встановлення фокусу на елемент під час завантаження сторінки. Може бути застосований до будь-якого елемента <input>, <textarea> або <button>, наприклад:
<input type='text' name='query' autofocus='autofocus'>* - Оскільки ця властивість викликає переміщення фокусу елемент введення даних, натискання клавіші Backspace більше не дозволяє користувачу повернутися на раніше переглянуту веб-сторінку (хоча поєднання Alt+← та Alt+→ як і раніше можна застосовувати для переходів з історії переглядів назад та вперед).
* - Браузери, що використовують інтерфейси сенсорних екранів (Android або iOS) зазвичай ігнорують атрибут autofocus, залишаючи за користувачем
право торкнутися зображення елемента, щоб він отримав фокус. Якщо якби це було не так, то генеровані включенням цього атрибуту збільшення елемента, фокусування та появи екранної клавіатури дуже скоро стали б сильно дратувати користувачів.
Атрибут required
Атрибут required призначений для забезпечення обов'язкового заповнення поля перед відправкою форми:
<input type='text' name='creditcard' required='required'>* - Коли браузер виявить спробу надсилання форми із незаповненим обов'язковим введенням, користувачеві буде виведено запрошення на заповнення поля.
Атрибут form
У HTML5 елементи <input> вже не потрібно поміщати в елементи <form>, оскільки форму, до якої застосовується елемент введення, можна вказати, надавши цьому елементу атрибут form. У наступному коді показано створену форму, але з елементом введення, що знаходиться за межами тегів <form> та </form>:
<form action='myscript.php' method='post' id='form1'></form>
<input type='text' name='username' form='form1'>* - Щоб мати таку можливість, формі потрібно присвоїти ідентифікатор, скориставшись атрибутом id, та послатися на цей ідентифікатор в атрибуті form елемент вводу.
Атрибути заміни
За допомогою цих атрибутів можна змінити параметри форми на поелементній основі. Наприклад, використовуючи атрибут formaction, можна вказати, що при натискання кнопки відправки дані форми будуть відправлені за URL-адресою, що відрізняється від тієї адреси, яка вказана в самій формі (вихідна URL-адреса дії і та адреса, якою вона підмінюється):
<form action='url1.php' method='post'>
<input type='text' name='field'>
<input type='submit' formaction='url2.php'>
</form>* - У HTML5 також з'явилася підтримка для атрибутів підміни for nctype, formmethod, formnovalidate і formtarget, які можуть використовуватися точно так саме.
<form id="example"> ... Існує форма з таким id
Кнопка, або поле підтвердження може мати такі атрибути
<button
type="submit"
form="example" <!-- id Форми, з якою звязвна кнопка. -->
formaction="/page" <!-- Перевизначає атрибут `action` форми. -->
formmethod="get" <!-- Перевизначає атрибут `method` форми. -->
>Відправити</button>