Главная » HTML5 » Форма » Заготовка для формы
852 0  

Заготовка для формы

Чистая заготовка для формы с разными элементами FORM, INPUT, TEXTAREA, SELECT, OPTION и BUTTON

Пример готовой формы - смотреть


<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>

Можно сделать запрет на отправку формы пока не поставлен чекбокс:

<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';

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

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

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