1,105,332 Community Members

Form Design & Validation HTML CSS

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

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;
}

​
Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

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

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

@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.

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

What browsers are you targeting?

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

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.

Member Avatar
jstfsklh211
Junior Poster
155 posts since Apr 2011
Reputation Points: 38 [?]
Q&As Helped to Solve: 35 [?]
Skill Endorsements: 2 [?]
 
0
 

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

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

@jstfsklh211

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

Member Avatar
GliderPilot
Posting Whiz in Training
295 posts since Sep 2006
Reputation Points: 31 [?]
Q&As Helped to Solve: 48 [?]
Skill Endorsements: 14 [?]
 
0
 
input:hover{
  color: #FFF;
}

input:focus{
  color:#FFF;
}

input:active{
  color:#FFF;
}
Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

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>
Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

Can anyone have idea to get the solution?

Member Avatar
GliderPilot
Posting Whiz in Training
295 posts since Sep 2006
Reputation Points: 31 [?]
Q&As Helped to Solve: 48 [?]
Skill Endorsements: 14 [?]
 
2
 

try this:

.button:focus,
.button:active {
  background-color: #FFF;
  color: #385D8A;
}
Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

@GliderPilot

Thank you so much.

Question Answered as of 1 Year Ago by GliderPilot, stbuchok and jstfsklh211
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: