Thread: html5
View Single Post
Old 06-26-2013, 07:06 AM   #1
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,171
Default html5

thought id put this on, i was doodling around waiting for clients and a post about html5 got me thinking this page might be of use as a ref or something.
Basically it add some of the nicer form elements, although not all browsers are supporting yet , in particular the date time pick, but i suspect just a matter of time.
for the form css i added a background colour but did an override on required fields using !important.
I added a class to <br> to determine and control a margin between them. (yes i was bored)
I also added some includes in way of adding an object, of course it would need to have a real file or path to work.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
 <style>input[required] { background-color: #E5F5EF !important;}
 input { background-color: #CF9; }
 textarea{ width:100px; height:80px;  background-color: #CF9;}
label {
color: #B4886B;
font-weight: bold;
display: block;
width: 250px;
float: left; text-align:right;
}
.clear{margin-bottom:5px;}
 </style>
</head>

<body>
<!--Include a file-->
<object name="foo" type="text/html" data="incl/header.inc"/>

<form> <label>  Email </label>
<input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail" required placeholder="enter a valid email address"  >

<br class="clear">


 <label>Name a  presidents , this is a list: </label>
  <input type="text" name="favCharacter" list="characters" maxlength="50"  autofocus placeholder="name a president"   ><br class="clear">

  <datalist id="characters">
   <option value="George Washington">
   <option value="Bill Clinton">
   <option value="George Bush">
    <option value="J.F. Kennedy">
     <option value="Fred Flinstone">
  </datalist>
 <label>Website:</label> <input type="url" name="website" id="website" placeholder="What is your website"><br class="clear">
 <label>  Enter comments </label>
<textarea name="comments" id="comments" maxlength="5
" placeholder="maximum 5 characters"></textarea><br class="clear">
 <label> Pick a date </label>
<input type="date" name="date" id="date" min="2011-01-01" max="2015-12-31" step="10" placeholder="yy-mm-dd"><br class="clear">
   
 <label>  check and send: </label>
 <input name="s" type="submit" value="Submit" >
</form>
<!--Include a file-->
<object name="foo" type="text/html" data="incl/footer.inc"/>
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline