Skip to content

Instantly share code, notes, and snippets.

@dartess

dartess/html

Created October 3, 2018 20:30
Show Gist options
  • Save dartess/d22e665dc5e9e75a4251008d1a4303ed to your computer and use it in GitHub Desktop.
Save dartess/d22e665dc5e9e75a4251008d1a4303ed to your computer and use it in GitHub Desktop.
Download ZIP
form-demo
Raw
html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form demo</title>
</head>
<body>
<form class="form" method="POST">
<fieldset class="form__set">
<label class="field form__field">
<span class="field__name">Фамилия:</span>
<input class="field__input" type="text" placeholder="Укажите фамилию *" name="lastname" required>
</label>
<label class="field form__field">
<span class="field__name">Имя:</span>
<input class="field__input" type="text" placeholder="Введите ваше имя *" name="firstname" required>
</label>
<label class="field form__field">
<span class="field__name">Отчество:</span>
<input class="field__input" type="text" placeholder="Ну и отчество тоже" name="patronymic">
</label>
</fieldset>
<fieldset class="form__set">
<legend class="form__set-title">Ваши безбашенные достижения в путешествии</legend>
<label class="checkbox form__field">
<input class="checkbox__input" type="checkbox" name="achievements[]" value="selfie">
<span class="checkbox__name">Сделал селфи с акулой</span>
</label>
<label class="checkbox form__field">
<input class="checkbox__input" type="checkbox" name="achievements[]" value="beach">
<span class="checkbox__name">Обгорел на пляже</span>
</label>
<label class="checkbox form__field">
<input class="checkbox__input" type="checkbox" name="achievements[]" value="norris">
<span class="checkbox__name">Видел Чака Норриса</span>
</label>
<label class="checkbox form__field">
<input class="checkbox__input" type="checkbox" name="achievements[]" value="souvenirs">
<span class="checkbox__name">Накупил сувениров</span>
</label class="checkbox form__field">
<label class="checkbox form__field">
<input class="checkbox__input" type="checkbox" name="achievements[]" value="tower">
<span class="checkbox__name">Удержал башню</span>
</label>
<label class="checkbox form__field">
<input class="checkbox__input" type="checkbox" name="achievements[]" value="hotel">
<span class="checkbox__name">Разгромил отель</span>
</label>
</fieldset>
<fieldset class="form__set">
<label class="field form__field">
<span class="field__name">Номер телефона</span>
<input class="field__input" type="tel" placeholder="Номер, пожалуйста" name="phone">
</label>
<label class="field form__field">
<span class="field__name">Адрес почты</span>
<input class="field__input" type="email" placeholder="Введите почту *" name="email" required>
</label>
</fieldset>
<fieldset class="form__set">
<legend class="form__set-title">С каким приложением путешествовали?</legend>
<label class="radio form__field">
<input class="radio__input" type="radio" name="app" value="ios">
<span class="radio__name">Pink для iOS</span>
</label>
<label class="radio form__field">
<input class="radio__input" type="radio" name="app" value="android">
<span class="radio__name">Pink на Android</span>
</label>
<label class="radio form__field">
<input class="radio__input" type="radio" name="app" value="winphone">
<span class="radio__name">Windows Phone</span>
</label>
</fieldset>
<fieldset class="form__set">
<legend class="form__set-title"><label for="comment">Опишите свои эмоции</label></legend>
<div class="field form__field">
<textarea
class="field__input field__input--area"
id="comment"
placeholder="Можно прям в красках, не стесняясь в выражениях"
name="comment"
></textarea>
</div>
</fieldset>
<button class="button form__submit" type="submit">Отправить форму</button>
<p class="form__note">* — обязательные поля</p>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment