Kosten
Понедельник, 09 Июля 2018, 19:18 | Сообщение 1
С таким большим количеством фреймворков, доступных толпе разработчиков в наши дни, иногда бывает сложно найти собственные формы, созданные с нуля, но это именно то. Собственная форма на HTML5 и CSS3, которые компактны, легко настраиваются в соответствии с вашими потребностями и требуют простой динамической конфигурации для отправки фактических электронных писем. Сталированная можно настроить в соответствии с вашими собственными требованиями. HTML
Код
<div class="searching-rotoplanet"> <form id="minimum-stemposted" action="" method="post"> <h3>Контактный формуляр</h3> <h4>Свяжитесь с нами по специальной цене</h4> <fieldset> <input placeholder="Your name" type="text" tabindex="1" required autofocus> </fieldset> <fieldset> <input placeholder="Your Email Address" type="email" tabindex="2" required> </fieldset> <fieldset> <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required> </fieldset> <fieldset> <input placeholder="Your Web Site (optional)" type="url" tabindex="4" required> </fieldset> <fieldset> <textarea placeholder="Type your message here...." tabindex="5" required></textarea> </fieldset> <fieldset> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Отправить </button> </fieldset> </form> </div>
CSS
Код
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 12px; line-height: 30px; color: #777; background: #4CAF50; } .searching-rotoplanet { max-width: 400px; width: 100%; margin: 0 auto; position: relative; } #minimum-stemposted input[type="text"], #minimum-stemposted input[type="email"], #minimum-stemposted input[type="tel"], #minimum-stemposted input[type="url"], #minimum-stemposted textarea, #minimum-stemposted button[type="submit"] { font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; } #minimum-stemposted { background: #F9F9F9; padding: 25px; margin: 150px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } #minimum-stemposted h3 { display: block; font-size: 30px; font-weight: 300; margin-bottom: 10px; } #minimum-stemposted h4 { margin: 5px 0 15px; display: block; font-size: 13px; font-weight: 400; } fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #minimum-stemposted input[type="text"], #minimum-stemposted input[type="email"], #minimum-stemposted input[type="tel"], #minimum-stemposted input[type="url"], #minimum-stemposted textarea { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #minimum-stemposted input[type="text"]:hover, #minimum-stemposted input[type="email"]:hover, #minimum-stemposted input[type="tel"]:hover, #minimum-stemposted input[type="url"]:hover, #minimum-stemposted textarea:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; } #minimum-stemposted textarea { height: 100px; max-width: 100%; resize: none; } #minimum-stemposted button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #4CAF50; color: #fbf8f8; margin: 0 0 5px; padding: 10px; font-size: 15px; } #minimum-stemposted button[type="submit"]:hover { background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #minimum-stemposted button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } .copyright { text-align: center; } #minimum-stemposted input:focus, #minimum-stemposted textarea:focus { outline: 0; border: 1px solid #ada9a9; } ::-webkit-input-placeholder { color: #8c8989; } :-moz-placeholder { color: #8c8989; } ::-moz-placeholder { color: #8c8989; } :-ms-input-placeholder { color: #8c8989; }
Демонстрация
Страна: (RU )