😎 » HTML5 » Форма » Заготовка для форми з новими фішками HTML5
1 038 0  

Заготовка для форми з новими фішками 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>

am <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 можна застосувати або до елемента <form>, або до будь-якого з типів елемента <input>: color, date, email, password, range, search, tel, text або url.

При включенні атрибуту 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 елемент вводу.

what Атрибути заміни

За допомогою цих атрибутів можна змінити параметри форми на поелементній основі. Наприклад, використовуючи атрибут 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>

Залишити свій коментар:

Досвід у веброзробці:

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