Form Design & Validation HTML CSS

[PriteshP23]

I would like to design HTML form with css and validation.

I want to have Textbox with colours indication. I have done with button to make it more meaningful. I would like to do same for the textbox.

I want to have light blue colour bydefault and when one clicks, it should be white and text should be black with dark blue border. In addition, if one enter wrong email, background-color of textbox should be light red, border (dare red) and should display message "Enter Valid Email".

// HTML CODE 

Please enter your Email:
                              <br />

                             <input type="Email" class="input" name="Emailfield" size="35" required="required" />

<input name="Submit" type="submit" class="button" id="button" value="OK" />                          
​

// CSS CODE

body {
    background: #ffffff;
}

input {
background-color: #4f81bd;
color: black;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 12pt
border: 12 px solid #385d8a;
}

.button {
font-family: Arial;
color: #ffffff;
font-size: 19px;
padding: 12px;
text-decoration: none;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border: solid #385D8A 4px;
background: #4F81BD;
}
.button:hover {
background: #ffffff;
color: #385D8A;
}

​

[stbuchok]

You're going to want to look at using JavaScript to do the email validation, maybe check out using jQuery.

http://stackoverflow.com/questions/2507030/email-validation-using-jquery

http://stackoverflow.com/questions/46155/validate-email-address-in-javascript

If you don't know javascript or jQuery, you will need to learn it.

jQuery - http://jquery.com/
JavaScript - http://www.w3schools.com/js/default.asp

[PriteshP23]

@stbuchok

For the moment, i do not want to use JavaScript. I just would like to use HTML5 elements.

For example,
<label for="email">Email:</label>
<input type="email" name="email" id="email" required="required" />

Thanks for the links. But I already knew that links.

[stbuchok]

What browsers are you targeting?

[PriteshP23]

Google Chrome 23.0.1271.95
Mozila Firefox 17.0
IE 9

I need to test all pages in above browsers. Thanks in advanced to reply as soon as possible.

[jstfsklh211]

initial styling you can do easily through css
you can change them while they have focus

css can NOT detect if your input is invalid

you will need to use js for that

[PriteshP23]

@jstfsklh211

Ok. thanks. How i can set active,hover,focus button actions in CSS ??

[GliderPilot]

input:hover{
  color: #FFF;
}

input:focus{
  color:#FFF;
}

input:active{
  color:#FFF;
}

[PriteshP23]

On page add, addbutton should be activated with white color. At the same time, other buttons should be remain as it is. I know that i have to work on CSS to understand well and to find optimal solution. Please correct my code.

Here is my code:

//CSS 

.button {
font-family: Arial;
color: #ffffff;
font-size: 19px;
padding: 12px;
text-decoration: none;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border: solid #385D8A 4px;
background: #4F81BD;
}
.button:hover{
background: #ffffff;
color: #385D8A;
}
.button:active{
background: #ffffff;
color: #385D8A;
}

//HTML

<a href="/add.php" target="_self"> <input name="submit" type="submit" class="button" id="button" value="Add" action="dashboard.php" width="600" height="13" /> </a>
<a href="/resetpassword.php" target="_self"> <input name="submit" type="submit" class="button" id="button" value="Reset" width="600" height="13" /> </a>
<a href="/configure.php" target="_self" > <input name="submit" type="submit" class="button" id="button" value="Configure" width="600" height="13" /> </a>

[PriteshP23]

Can anyone have idea to get the solution?

[GliderPilot]

try this:

.button:focus,
.button:active {
  background-color: #FFF;
  color: #385D8A;
}

[PriteshP23]

@GliderPilot

Thank you so much.