Започваме с бутона за изпращане. Текущото състояние на CSS трябва да изглежда по следния начин:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}Тази синтакса води до следния резултат:
Това е съвсем обикновен бутон. В момента той не е особено забележително оформен, но всъщност изпълнява целта си. Въпреки това ще бъде освежен. Крайният резултат ще изглежда по следния начин:
Освен това има ховър ефект. Бутона ще промени цвета си, когато се мести мишката върху него.
Ако се вгледате внимателно в бутона, ще забележите закръглените ъгли. Това определено е едно от CSS нововъведенията, на които уеб дизайнерите изкараха дълго време. Защото "преди" този възможност не съществуваше. (Изключение правят, разбира се, елементите button, при които можеше да се работи с картинки.)
Сега закръглените ъгли могат да бъдат прилагани не само на обикновени елементи на страницата, но и на бутоните.
В работния проект на CSS3 има свойството border-radius за това. Mozilla и браузърите на WebKit предлагат алтернативни начини за подкрепа на това свойство за изпитателна цел.
• -moz-border-radius
• -webkit-border-radius
Междувременно обаче всички съвременни браузъри поддържат закръглените ъгли.
На базата на този досег, дефиницията на border-radius може да изглежда по следния начин:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Въпреки това има още нещо, което може да се забележи при по-внимателно разглеждане. Наистина беше добавен градиент на бутона.
Такова нещо сега може да се изпълни най-накрая с CSS средства. За това се използват различните свойства gradient. Тези се присвояват като стойност на свойството background. Вече има много инструменти, с помощта на които може да се генерира градиента на цветовете.
Един от тях можеш да намериш например на следния интернет адрес: http://www.css3factory.com/linear-gradients/. В следната синтакса се определя градиент на цветовете и закръглените ъгли.
В текущия пример синтаксисът за бутона изглежда както следва:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
Вече споменах, че бутоните трябва да реагират при преминаването на мишката върху тях. За това се използва известното asoc:hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Бутонът все още ще реагира на още една ситуация. Там се използва псевдо класа :active. Така се реагира, когато бутона се щракне.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
В текущия пример при щракване на бутона се променя цвета на горния край и цвета на фона на бутона.
Закръглени ъгли за полетата
Така наречените закръглени ъгли могат да бъдат приложени не само върху бутона, но и върху полетата за въвеждане. Резултатът може да изглежда по следния начин:
И ето синтаксиса към него:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Вече познавате нужните свойства, които трябва да дефинирате за такива закръглени ъгли.
Валидиране на формата чрез CSS3
В момента посетителите могат да въвеждат каквото пожелаят в полетата за въвеждане. Проверка на въведените стойности не се извършва. Това трябва да се промени. Полетата ще бъдат проверявани по следните критерии:
• Полето за Име трябва да бъде попълнено.
• Полето за Имейл трябва да съдържа синтактично коректен имейл адрес.
• Многоредовото поле за въвеждане също трябва да бъде попълнено.
Само след като тези критерии бъдат изпълнени, формулярът може фактически да бъде изпратен.
За да се маркира едно поле като задължително, му се присвоява атрибута required. Полето, маркирано по този начин, трябва да бъде попълнено, следователно не трябва да бъде празно.
Такава приложение би изглеждало по следния начин:
iso3166 -->
<form> <input type="text" name="name" id="name" value="" required/> </form>
Тук браузърът ще провери дали полето е попълнено. Ако полето е празно и все пак се опитвате да изпратите формуляра, браузърът трябва да изведе грешка.
Още по-нататък, при електронните адреси, се посочва type="email" и атрибута required. Сега в полето трябва да се въведе не просто стойност, а реален имейл адрес; в противен случай, при изпращане на формуляра, също ще се получи грешка.
Като цяло формулярът може да изглежда по следния начин:
<ol>
<li>
<label for="name">Име:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">Имейл адрес:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Коментар:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Изпрати" />
</li>
</ol>
Именно в по-обширни формуляри може да има полета, които са задължителни, но също и такива, които не е задължително да се попълняват. В такива случаи можете да маркирате задължителните полета по специфичен начин. Достъпът до задължителните полета се осъществява в CSS чрез :required.
:required {
background-color: #ff0000;
}С този синтаксис задължителните полета се оцветяват с червен фон.
Друг вариант, за да се акцентира върху задължителните полета, е следният синтаксис:
input:required:focus {
border: 1px solid red;
outline: none;
}
Когато се опитвате да изпратите формуляра, първото поле получава червена рамка и фокус, ако не е попълнено или не отговаря на изискванията за валидация.
Ако потребителят след това попълни това поле правилно, но има още едно непопълнено поле, то следващият път, когато ще се изпраща формулярът, то също ще бъде фокусирано и ще получи червена рамка.
