Learning More About HTML/CSS

As someone who has experience using HMTL and CSS I found the more advanced tutorials very interesting. I enjoyed the learning more about the different types of input that are now available in HTML5. There are now specific input types for time, date, url, telephone, and email to name a few. Below I have an example of a form that consists of two inputs, one is an email type, the other is an URL type.

Using CSS3’s valid and invalid classes I was able to make the input box have a red outline if the user input was not valid (In this case I entered an invalid email. Here I entered a valid email but an invalid URL. However my favorite new input type is “color”. When a user clicks on the color, the color wheel on the left pops up.

This input could easily be paired with a javascript function that could tell the use what the HexCode ID was of the color they selected.
Below is the HTML and CSS code I used to create these examples:

 

Author: tordic

One comment

  1. Wow! Its cool you got to check out all these more advanced features. Some of them, especially the color picker and ability to color borders in accordance with whats in them, seem really powerful and useful.

Leave a Reply

Your email address will not be published. Required fields are marked *