Web Design Tutorials: Photoshop, HTML, Flash, PHP

HTML Tutorial – Quick tip coding beautiful form

Posted on Nov 2nd, 2011 in HTML Tutorials | 0 comments

What will be needed in this tutorial?

Step 1. Folder and files structure

First create Your folder structure. We will need index.html, style.css, images folder and js folder.

In images folder we will have background image and icons from input fields

In js folder we will have cufon files for our font

For cufon go to Cufon page and download cufon-yui.js file. Also You have to create a js file for Museo Slab. You have nice documentation on the site so I will skip this. You can find ready js file in tutorial package.

Step 2. HTML structure

I will use a mix of xhtml and CSS3 in this tutorial. Create html file for now

`1`	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

`2`	`<html` `xmlns="http://www.w3.org/1999/xhtml"` `xml:lang="en">`

3 <head>

`4`	`<meta` `http-equiv="Content-Type"` `content="text/html;charset=UTF-8"` `/>`

`5`	`<link` `rel="stylesheet"` `type="text/css"` `href="style.css"` `media="all"` `/>`

`6`	`<script` `type="text/javascript"` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>`

`7`	`<script` `type="text/javascript"` `src="js/cufon-yui.js"></script>`

`8`	`<script` `type="text/javascript"` `src="js/Museo_Slab_500_400.font.js"></script>`

`9`	`<script` `type="text/javascript">`

`10`	`Cufon.replace('label', {`

`11`	`textShadow: '1px 1px 1px #000'`

12 });

`13`	`</script>`

`14`	`<title>Form</title>`

15 </head>

16 <body>

`17`	`<div` `id="wrapper">`

`18`	`<form` `action="#"` `id="form">`

`19`	`<label` `for="name">Name</label>`

`20`	`<input` `type="text"` `id="name"` `/>`

`21`	`<label` `for="email">Email</label>`

`22`	`<input` `type="text"` `id="email"` `/>`

`23`	`<label` `for="telephone">Telephone</label>`

`24`	`<input` `type="text"` `id="telephone"` `/>`

`25`	`<label` `for="message">Message</label>`

`26`	`<textarea` `name="message"` `id="message"` `cols="30"` `rows="10"></textarea>`

`27`	`<input` `type="submit"` `value="Send"` `name="submit"` `id="submit"` `/>`

28 </form>

29 </div>

30

`31`	`<script` `type="text/javascript"> Cufon.now(); </script>`

32

33 </body>

34 </html>

As You can see it’s XHTML Transitional 1.0. We have link to our stylesheet, link to jquery and two scripts for font, also we have trigget fo cufon labels. Form is really simple, only necessary things here. Right before we have script for Cufon.now();. And that’s it. For this tutorial we don’t have to write more code in here.

Step 3. Styling

In this step we have some of CSS3 features. I used Prefixr for some of the lines to just speed up the whole process. So here’s whole css code

view source print ?

1 * {

`2`	`margin:0;`

`3`	`padding:0;`

4 }

5

6 body {

`7`	`background:` `#59799e` `url(images/bg.jpg)` `no-repeat` `top` `center;`

`8`	`color:` `#444;`

`9`	`font-size:` `14px;`

10 }

11

`12`	`#wrapper {`

`13`	`margin:` `30px` `auto` `0;`

`14`	`width:` `400px;`

15 }

16

17 label {

`18`	`display:` `block;`

`19`	`font-size:` `24px;`

`20`	`padding:` `13px` `0;`

`21`	`color:` `#fff;`

`22`	`text-shadow:` `1px` `1px` `1px` `#666;`

23 }

24

25 input {

`26`	`height:` `20px;`

`27`	`padding:` `15px;`

`28`	`width:` `330px;`

`29`	`-webkit-border-radius:` `6px;`

`30`	`-khtml-border-radius:` `6px;`

`31`	`-moz-border-radius:` `6px;`

`32`	`border-radius:` `6px;`

`33`	`-webkit-box-shadow:` `0` `0` `10px` `#444;`

`34`	`-moz-box-shadow:` `0` `0` `10px` `#444;`

`35`	`box-shadow:` `0` `0` `10px` `#444;`

`36`	`border:` `1px` `solid` `#fff;`

37 }

38

`39`	`textarea {`

`40`	`height:` `220px;`

`41`	`width:` `330px;`

`42`	`padding:` `15px;`

`43`	`border:` `1px` `solid` `#fff;`

`44`	`-webkit-border-radius:` `6px;`

`45`	`-khtml-border-radius:` `6px;`

`46`	`-moz-border-radius:` `6px;`

`47`	`border-radius:` `6px;`

`48`	`-webkit-box-shadow:` `0` `0` `10px` `#444;`

`49`	`-moz-box-shadow:` `0` `0` `10px` `#444;`

`50`	`box-shadow:` `0` `0` `10px` `#444;`

51 }

52

`53`	`input[type="text"]:hover, textarea:hover {`

`54`	`border:` `1px` `solid` `#fff;`

`55`	`-webkit-box-shadow:` `0` `0` `20px` `rgba(0,` `0,` `0,` `0.25)` `inset,` `0` `0` `5px` `rgba(255,` `255,` `255,` `0.4);`

`56`	`-moz-box-shadow:` `0` `0` `20px` `rgba(0,` `0,` `0,` `0.25)` `inset,` `0` `0` `5px` `rgba(255,` `255,` `255,` `0.4);`

`57`	`box-shadow:` `0` `0` `20px` `rgba(0,` `0,` `0,` `0.25)` `inset,` `0` `0` `5px` `rgba(255,` `255,` `255,` `0.4);`

58 }

59

`60`	`input#submit {`

`61`	`width:` `150px;`

`62`	`text-align:` `center;`

`63`	`color:` `#fff;`

`64`	`height:` `50px;`

`65`	`padding:` `0;`

`66`	`text-shadow:` `1px` `1px` `1px` `#000;`

`67`	`font-size:` `18px;`

`68`	`text-transform:` `uppercase;`

`69`	`margin-top:` `50px;`

`70`	`float:` `right;`

`71`	`border:` `1px` `solid` `#000;`

`72`	`background:` `#000;`

`73`	`background-image: -webkit-gradient(linear,` `left` `top,` `left` `bottom, color-stop(0%,` `#3b3b3b), color-stop(100%,` `#000000));`

`74`	`background: -webkit-linear-gradient(top,` `#3b3b3b` `0%,#000000` `100%);`

`75`	`background: -moz-linear-gradient(top,` `#3b3b3b` `0%,#000000` `100%);`

`76`	`background: -o-linear-gradient(top,` `#3b3b3b` `0%,#000000` `100%);`

`77`	`background: -ms-linear-gradient(top,` `#3b3b3b` `0%,#000000` `100%);`

`78`	`background: linear-gradient(top,` `#3b3b3b` `0%,#000000` `100%);`

`79`	`opacity:` `0.5;`

80 }

81

`82`	`input#submit:hover {`

`83`	`color:` `#ccc;`

`84`	`cursor:` `pointer;`

`85`	`opacity:` `0.8;`

86 }

87

88 #name {

`89`	`background:` `#f0f0f0` `url(images/name.png)` `10px` `center` `no-repeat;`

`90`	`padding-left:` `50px;`

91 }

92

`93`	`#email {`

`94`	`background:` `#f0f0f0` `url(images/email.png)` `10px` `center` `no-repeat;`

`95`	`padding-left:` `50px;`

96 }

97

`98`	`#telephone {`

`99`	`background:` `#f0f0f0` `url(images/telephone.png)` `10px` `center` `no-repeat;`

100 padding-left: 50px;

101 }

102

103 #message {

104 background: #f0f0f0 url(images/message.png) 10px 10px no-repeat;

105 padding-left: 50px;

106 }

Finished!

As You can see in the browser there are some problems. Cufon can’t be attached with inputs value. So there is Arial I belive. Of course there as some tricks that fix this (javascript) but for this tutorial I don’t think it’s really neccesary.

Source: mtuts.com