Перевірка заповнення форми на html5 + css3

Перевірка заповнення форм на HTML5 + CSS3

Практично на кожному сайті можна побачити форму реєстрації. Звичайно є такі, хто просто брав чужу форму, вставляв собі, а потім користувач хоче зареєструватися, але не може. Бувають такі випадки що при реєстрації певний пароль допускається і в вас виходить зареєструватися, але потім коли ви намагаєтеся увійти на сайт, з`являється помилка що це неприпустимий пароль, і так сайт втрачає певну кількість відвідувачів, тому будьте уважні.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

Це вже не перший урок на дану тему, можливо ви не бачили минулі і вони вам будуть цікаві:

Перевірка заповнення форм на HTML5 + стилі
Форма реєстрації та входу на CSS3 + HTML5
Призначені для користувача стилі для форми на чистому CSS без javascript

HTML частина

Давайте подивимося з чого ж складається дана форма:

1234567891011121314151617181920212223242526272829

lt;form class="Contact_form" action="#" method="Post" name="Contact_form"gt;lt;ulgt;lt;ligt;lt;h2gt; Напишіть намlt;/h2gt;lt;span class="Required_notification"gt; * поля обов`язкові до заповненняlt;/spangt;lt;/ligt;lt;ligt;lt;label for="Name"gt; Ім`я:lt;/labelgt;lt;input type="Text" placeholder="Петров Олександр" required /gt;lt;/ligt;lt;ligt;lt;label for="Email"gt; Email:lt;/labelgt;lt;input type="Email" name="Email" placeholder="[email protected]" required /gt;lt;span class="Form_hint"gt; Наприклад "[email protected]"lt;/spangt;lt;/ligt;lt;ligt;lt;label for="Website"gt; Веб-сайт:lt;/labelgt;lt;input type="Url" name="Website" placeholder="Http://sitehere.ru" required pattern="(Http | https): //.+"/gt;lt;span class="Form_hint"gt; Наприклад "https://sitehere.ru"lt;/spangt;lt;/ligt;lt;ligt;lt;label for="Message"gt; Повідомлення:lt;/labelgt;lt;textarea name="Message" cols="40" rows="6" required gt; lt;/textareagt;lt;/ligt;lt;ligt;lt;button class="Submit" type="Submit"gt; Відправитиlt;/buttongt;lt;/ligt;lt;/ulgt;lt;/formgt;

Якщо ви вивчали минулі уроки, то вам будуть знайомі такі атрибути як placeholder і required.

Але все-таки повторю ще раз:

placeholder - присутність даного атрибута означає що на тлі даного текстового поля буде текст, заданий в значенні даного атрибута. А при введенні він зникає.

required - якщо у поля є даний атрибут, значить поле є обов`язковим для заповнення.

І ми не використали javascript бо HTML5 дозволяє нам зробити за допомогою своїх функцій.

Також тут є новий атрибут pattern = "(http | https): //.+" - він задає то, з чого має починатися веб-адреса сайту, інакше нічого не вийде.

CSS частина

Тепер з HTML-частиною ми закінчили і треба надати вигляду нашої формі. Оскільки всі елементи форми знаходяться в неврегульованих списку, отже за допомогою відповідних селекторів буде задавати стилі:

123456789101112131415

.contact_form ul {width:750px-list-style-type:none-list-style-position:outside-margin:0px-padding:0px-}.contact_form li{padding:12px-border-bottom:1px solid #eee-position:relative-}.contact_form li: First-child, .contact_form li: Last-child {border-bottom:1px solid # 777-}

Остання властивість означає що ми задаємо кордон першому і останньому елементу списку. Далі визначимо основні стилі для елементів форми:

1234567891011121314151617181920

.contact_form label {width:150px-margin-top: 3px-display: inline-block-float:left-padding:3px-}.contact_form input {height:20px-width:220px-padding:5px 8px-}.contact_form textarea {padding:8px-width:300px-}.contact_form button {margin-left:156px-}

А зараз напишемо стилі, коли поля активні і коли немає:

12345678910111213141516

.contact_form input, .contact_form textarea {border:1px solid #aaa-box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset-border-radius:2px-padding-right:30px--moz-transition: padding .25s--webkit-transition: padding .25s--o-transition: padding .25s-transition: padding .25s-}.contact_form input: focus, .contact_form textarea: focus {background: #fff-border:1px solid # 555-box-shadow: 0 0 3px #aaa-padding-right:70px-}

Далі задаємо стилі коли стався некоректний введення:

Відео: Курс по HTML5 / CSS3. Форми. частина 8

12345678910111213

.contact_form input: required, .contact_form textarea: required {background: #fff url(images / red_asterisk.jpg) no-repeat 98% center-}.contact_form input: required: valid, .contact_form textarea: required: valid {background: #fff url(images / valid.jpg) no-repeat 98% center-box-shadow: 0 0 5px # 5cd053-border-color: # 28921f-}.contact_form input: focus: invalid, .contact_form textarea: focus: invalid {background: #fff url(images / invalid.jpg) no-repeat 98% center-box-shadow: 0 0 5px # d45252-border-color: # b03535}

Залишилось зовсім трохи :). Передостаннім кроком потрібно задати стилі для підказок:

Відео: Перевірка полів форми використовуючи JQuery

1234567891011121314151617181920

.form_hint {background: # d45252-border-radius: 3px 3px 3px 3px-color: white-margin-left:8px-padding: 1px 6px-z-index: 999- / * Означає що підказка буде перекривати всі елементи * /position: absolute- / * Можна підказку розбити на дві рядки * /display: none-}.form_hint:: before {content: " 25C0"-color:# d45252-position: absolute-top:1px-left:-6px-}.contact_form input: focus + .form_hint {display: inline-}.contact_form input: required: valid + .form_hint {background: # 28921f-}.contact_form input: required: valid + .form_hint:: before {color:# 28921f-}

І останньою дією буде завдання стилю кнопці «Відправити»:

1234567891011121314151617181920212223242526272829303132333435363738

button.submit {background-color: # 68b12f-background: -webkit-gradient(linear, left top, left bottom, from(# 68b12f), to(# 50911e))-background: -webkit-linear-gradient(top, # 68b12f, # 50911e)-background: -moz-linear-gradient(top, # 68b12f, # 50911e)-background: -ms-linear-gradient(top, # 68b12f, # 50911e)-background: -o-linear-gradient(top, # 68b12f, # 50911e)-background: linear-gradient(top, # 68b12f, # 50911e)-border: 1px solid # 509111-border-bottom: 1px solid # 5b992b-border-radius: 3px--webkit-border-radius: 3px--moz-border-radius: 3px--ms-border-radius: 3px--o-border-radius: 3px-box-shadow: inset 0 1px 0 0 # 9fd574--webkit-box-shadow: 0 1px 0 0 # 9fd574 inset --moz-box-shadow: 0 1px 0 0 # 9fd574 inset--ms-box-shadow: 0 1px 0 0 # 9fd574 inset--o-box-shadow: 0 1px 0 0 # 9fd574 inset-color: white-font-weight: bold-padding: 6px 20px-text-align: center-text-shadow: 0 -1px 0 # 396715-}button.submit: hover {opacity:.85-cursor: pointer-}button.submit: active {border: 1px solid # 20911e-box-shadow: 0 0 10px 5px # 356b0b inset--webkit-box-shadow:0 0 10px 5px # 356b0b inset --moz-box-shadow: 0 0 10px 5px # 356b0b inset--ms-box-shadow: 0 0 10px 5px # 356b0b inset--o-box-shadow: 0 0 10px 5px # 356b0b inset-}

висновок

Ну от і все! # 128578; Інтернет-технології настільки швидко розвиваються, що ви й помітити не встигнете як все будуть застосовувати зв`язку HTML5 + CSS3. Звичайно треба передбачати як буде виглядати той чи інший елемент в старих браузерах, але і про нові можливості забувати не можна!

Успіхів!

джерело: webdesign.tutsplus.com

Відео: HTML форми - тег form і його атрибути

Поділися в соц мережах: