We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,076,235 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

Form Design & Validation HTML CSS

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

​
4
Contributors
11
Replies
2 Weeks
Discussion Span
5 Months Ago
Last Updated
13
Views
Question
Answered
PriteshP23
Junior Poster
113 posts since Oct 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 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

stbuchok
Practically a Posting Shark
876 posts since May 2011
Reputation Points: 138
Solved Threads: 124
Skill Endorsements: 2

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

PriteshP23
Junior Poster
113 posts since Oct 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0

What browsers are you targeting?

stbuchok
Practically a Posting Shark
876 posts since May 2011
Reputation Points: 138
Solved Threads: 124
Skill Endorsements: 2

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.

PriteshP23
Junior Poster
113 posts since Oct 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 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

jstfsklh211
Junior Poster
100 posts since Apr 2011
Reputation Points: 34
Solved Threads: 27
Skill Endorsements: 1

@jstfsklh211

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

PriteshP23
Junior Poster
113 posts since Oct 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0
input:hover{
  color: #FFF;
}

input:focus{
  color:#FFF;
}

input:active{
  color:#FFF;
}
GliderPilot
Posting Whiz in Training
239 posts since Sep 2006
Reputation Points: 34
Solved Threads: 42
Skill Endorsements: 12

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
Junior Poster
113 posts since Oct 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0

Can anyone have idea to get the solution?

PriteshP23
Junior Poster
113 posts since Oct 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0

try this:

.button:focus,
.button:active {
  background-color: #FFF;
  color: #385D8A;
}
GliderPilot
Posting Whiz in Training
239 posts since Sep 2006
Reputation Points: 34
Solved Threads: 42
Skill Endorsements: 12

@GliderPilot

Thank you so much.

PriteshP23
Junior Poster
113 posts since Oct 2012
Reputation Points: 0
Solved Threads: 0
Skill Endorsements: 0
Question Answered as of 5 Months Ago by GliderPilot, stbuchok and jstfsklh211

This question has already been solved: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
View similar articles that have also been tagged:
 
© 2013 DaniWeb® LLC
Page rendered in 0.0974 seconds using 2.73MB