Category Archives: HTML5

How to create your own Website | Examples

  • A basic website can be designed by using HyperText Markup Language (HTML). The scripts can be written in Notepad or a text document depending on the operating system which you use .The very basic tools for creating a website start with the use of HTML tags and HTML elements. The former are often used to pass on information about the unit of the content and the latter ones are used to format tools for the webpage. While coding, the HTML attributes and values are used to provide information like placement, height etc. for the content. In addition to these, one can use color tags, picture tags and HTML division tags to create a vivid webpage.

How to create your own Website :

HTML Text Formatting Elements | Small Formatting | Bold and Strong Formatting

Text Formatting :

This text is bold

This text is italic

This is superscript

HTML Formatting Elements

  • In the previous chapter, you learned about HTML styling, using the HTML style attribute.
  • HTML also defines special elements, for defining text with a special meaning.
  • HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
  • Formatting elements were designed to display special types of text:
  1. Bold text
  2. Important text
  3. Italic text
  4. Emphasized text
  5. Marked text
  6. Small text
  7. Deleted text
  8. Inserted text
  9. Subscripts
  10. Superscripts

HTML Bold and Strong Formatting :

The HTML <b> element defines bold text, without any extra importance.

Example :1

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

Example : 2

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><strong>This text is strong.</strong></p>

</body>
</html>

HTML Italic and Emphasized Formatting :

The HTML <i> element defines italic text, without any extra importance.

Example :

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>

Example :

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

HTML Small Formatting :

The HTML <small> element defines small text:

Example :

<!DOCTYPE html>
<html>
<body>

<h2>HTML <small>Small</small> Formatting</h2>

</body>
</html>

HTML Marked Formatting :

The HTML <mark> element defines marked or highlighted text:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>HTML <mark>Marked</mark> Formatting</h2>

</body>
</html>

HTML Deleted Formatting :

The HTML <del> element defines deleted (removed) of text.

Example:

<!DOCTYPE html>
<html>
<body>

<p>The del element represent deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

HTML Inserted Formatting :

The HTML <ins> element defines inserted (added) text.

Example :

<!DOCTYPE html>
<html>
<body>

<p>The ins element represent inserted (added) text.</p>

<p>My favorite <ins>color</ins> is red.</p>

</body>
</html>

HTML Subscript Formatting :

The HTML <sub> element defines subscripted text.

Example : 

<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

HTML Superscript Formatting  :

The HTML <sup> element defines superscripted text.

Example :

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

Test Yourself with Exercises! :

Example :  1

<!DOCTYPE html>
<html>
<body>

<h1>What Does WWF Do?</h1>

<p>WWF's mission is to stop the degradation of our planet's natural environment.</p>

</body>
</html>

Example : 2

<!DOCTYPE html>
<html>
<body>

<h1>Tokyo</h1>

<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

</body>
</html>

Example :  3

<!DOCTYPE html>
<html>
<body>

<p>HTML is FUN to learn!</p>

</body>
</html>

Example :  4

<!DOCTYPE html>
<html>
<body>

<p>H2O is the scientific term for water.</p>

</body>
</html>

Example :  5

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is blue red.</p>

</body>
</html>

HTML Text Formatting Elements   :

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

 

How to Designs HTML Form and Examples

  • Let’s face it, HTML forms are integral part of the web, it’s a powerful and crucial tool for interacting with users. But without some styling and positioning, forms just look awful! So, how do you make it appealing and presentable? This is where the CSS comes into play. In this article I’ve compiled 10 Form styles which you can directly copy and use it on your website projects.

    These forms look great on all modern browsers, but may require some tweaking on old browsers. Some forms here do not have labels, they rely on HTML5 placeholder attribute, unfortunately older browsers do not support this. So, if you are worried about it, you can use placeholder alternatives such asPlaceholders.js.

Form Style 1 :

  • This is the clean CSS contact form layout. It has no background and comes with bold labels, light blue button and soft box-shadow on focus for input fields.

HTML – CODE :

<<span class="kw2">form</span>></span>
<span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-1"</span>></span>
<span class="sc2"><<span class="kw2">li</span>><<span class="kw2">label</span>></span>Full Name <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">label</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field1"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"field-divided"</span> placeholder<span class="sy0">=</span><span class="st0">"First"</span> <span class="sy0">/</span>></span><span class="sc1">&nbsp;</span><span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field2"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"field-divided"</span> placeholder<span class="sy0">=</span><span class="st0">"Last"</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">label</span>></span>Email <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field3"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"field-long"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">label</span>></span>Subject<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">select</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field4"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"field-select"</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Advertise"</span>></span>Advertise<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Partnership"</span>></span>Partnership<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"General Question"</span>></span>General<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">select</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">label</span>></span>Your Message <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field5"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"field5"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"field-long field-textarea"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Submit"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>>

CSS – CODE :


<style type<span class="sy0">=</span><span class="st0">"text/css"</span><span class="sy0">></span>
<span class="re1">.form-style-1</span> <span class="br0">{</span>
<span class="kw1">margin</span><span class="sy0">:</span><span class="re3">10px</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">400px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">20px</span> <span class="re3">12px</span> <span class="re3">10px</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">13px</span> <span class="st0">"Lucida Sans Unicode"</span><span class="sy0">,</span> <span class="st0">"Lucida Grande"</span><span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> li <span class="br0">{</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">list-style</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">10px</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> label<span class="br0">{</span>
<span class="kw1">margin</span><span class="sy0">:</span><span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">3px</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">0px</span><span class="sy0">;</span>
<span class="kw1">display</span><span class="sy0">:</span><span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="kw2">text</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>date<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>datetime<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>number<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>search<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>time<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="kw2">url</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>email<span class="br0">]</span><span class="sy0">,</span>
textarea<span class="sy0">,</span>
select<span class="br0">{</span>
box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#BEBEBE</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">7px</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span><span class="re3">0px</span><span class="sy0">;</span>
-webkit-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
-moz-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
-ms-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
-o-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
<span class="kw1">outline</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="kw2">text</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>date<span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>datetime<span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>number<span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>search<span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>time<span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="kw2">url</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>email<span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> textarea<span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-1</span> select<span class="re2">:focus</span><span class="br0">{</span>
-moz-box-shadow<span class="sy0">:</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">8px</span> <span class="re0">#88D5E9</span><span class="sy0">;</span>
-webkit-box-shadow<span class="sy0">:</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">8px</span> <span class="re0">#88D5E9</span><span class="sy0">;</span>
box-shadow<span class="sy0">:</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">8px</span> <span class="re0">#88D5E9</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#88D5E9</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> .field-divided<span class="br0">{</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">49%</span><span class="sy0">;</span>
<span class="br0">}</span>

<span class="re1">.form-style-1</span> .field-long<span class="br0">{</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> .field-select<span class="br0">{</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> .field-textarea<span class="br0">{</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>submit<span class="br0">]</span><span class="sy0">,</span> <span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>button<span class="br0">]</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#4B99AD</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">8px</span> <span class="re3">15px</span> <span class="re3">8px</span> <span class="re3">15px</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>submit<span class="br0">]</span><span class="re2">:hover</span><span class="sy0">,</span> <span class="re1">.form-style-1</span> input<span class="br0">[</span>type<span class="sy0">=</span>button<span class="br0">]</span><span class="re2">:hover</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#4691A4</span><span class="sy0">;</span>
box-shadow<span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
-moz-box-shadow<span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
-webkit-box-shadow<span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-1</span> .required<span class="br0">{</span>
<span class="kw1">color</span><span class="sy0">:</span><span class="kw2">red</span><span class="sy0">;</span>
<span class="br0">}</span>
</style<span class="sy0">>

Form Style 2 :

  • Another clean Form style fits perfectly into any clean webpage layout. The form has soft box-shadow effects around the fields, and nice orange button.

HTML – CODE :

<<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-2"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-2-heading"</span>></span>Provide your information<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">form</span> <span class="kw3">action</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">method</span><span class="sy0">=</span><span class="st0">"post"</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field1"</span>><<span class="kw2">span</span>></span>Name <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"input-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field1"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field2"</span>><<span class="kw2">span</span>></span>Email <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"input-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field2"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span>><<span class="kw2">span</span>></span>Telephone<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tel-number-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"tel_no_1"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">"4"</span> <span class="sy0">/</span>></span>-<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tel-number-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"tel_no_2"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">"4"</span>  <span class="sy0">/</span>></span>-<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tel-number-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"tel_no_3"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">"10"</span>  <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field4"</span>><<span class="kw2">span</span>></span>Regarding<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">select</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field4"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"select-field"</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"General Question"</span>></span>General<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Advertise"</span>></span>Advertisement<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Partnership"</span>></span>Partnership<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">select</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field5"</span>><<span class="kw2">span</span>></span>Message <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field5"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"textarea-field"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>

<span class="sc2"><<span class="kw2">label</span>><<span class="kw2">span</span>></span><span class="sc1">&nbsp;</span><span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Submit"</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>>

CSS – CODE :


<style type<span class="sy0">=</span><span class="st0">"text/css"</span><span class="sy0">></span>
.form-style-<span class="nu0">2</span><span class="br0">{</span>
<span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">500px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">20px</span> <span class="re3">12px</span> <span class="re3">10px</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">13px</span> Arial<span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="br0">}</span>
.form-style-<span class="nu0">2</span>-heading<span class="br0">{</span>
<span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span>
<span class="kw1">font-style</span><span class="sy0">:</span> <span class="kw2">italic</span><span class="sy0">;</span>
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#ddd</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">15px</span><span class="sy0">;</span>
<span class="kw1">padding-bottom</span><span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> label<span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">0px</span> <span class="re3">0px</span> <span class="re3">15px</span> <span class="re3">0px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> label <span class="sy0">></span> span<span class="br0">{</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span>
<span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span>
<span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span>
<span class="kw1">padding-top</span><span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span>
<span class="kw1">padding-right</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> span.required<span class="br0">{</span>
<span class="kw1">color</span><span class="sy0">:</span><span class="kw2">red</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> .tel-number-field<span class="br0">{</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">40px</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> input.input-field<span class="br0">{</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">48%</span><span class="sy0">;</span>

<span class="br0">}</span>

<span class="re1">.form-style-2</span> input<span class="re1">.input-field</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> <span class="re1">.tel-number-field</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> <span class="re1">.textarea-field</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> .select-field<span class="br0">{</span>
box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#C2C2C2</span><span class="sy0">;</span>
box-shadow<span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">4px</span> <span class="re0">#EBEBEB</span><span class="sy0">;</span>
-moz-box-shadow<span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">4px</span> <span class="re0">#EBEBEB</span><span class="sy0">;</span>
-webkit-box-shadow<span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">4px</span> <span class="re0">#EBEBEB</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
-webkit-border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
-moz-border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">7px</span><span class="sy0">;</span>
<span class="kw1">outline</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> <span class="re1">.input-field</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> <span class="re1">.tel-number-field</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> <span class="re1">.textarea-field</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> <span class="re1">.select-field</span><span class="re2">:focus</span><span class="br0">{</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#0C0</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> .textarea-field<span class="br0">{</span>
<span class="kw1">height</span><span class="sy0">:</span><span class="re3">100px</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">55%</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> input<span class="br0">[</span>type<span class="sy0">=</span>submit<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> input<span class="br0">[</span>type<span class="sy0">=</span>button<span class="br0">]</span><span class="br0">{</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">8px</span> <span class="re3">15px</span> <span class="re3">8px</span> <span class="re3">15px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#FF8500</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
box-shadow<span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">4px</span> <span class="re0">#DADADA</span><span class="sy0">;</span>
-moz-box-shadow<span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">4px</span> <span class="re0">#DADADA</span><span class="sy0">;</span>
-webkit-box-shadow<span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">4px</span> <span class="re0">#DADADA</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
-webkit-border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
-moz-border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-2</span> input<span class="br0">[</span>type<span class="sy0">=</span>submit<span class="br0">]</span><span class="re2">:hover</span><span class="sy0">,</span>
<span class="re1">.form-style-2</span> input<span class="br0">[</span>type<span class="sy0">=</span>button<span class="br0">]</span><span class="re2">:hover</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#EA7B00</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">}</span>
</style<span class="sy0">>

Form Style 3 :

  • If you are a women or a fan of pink color, you will find this form style interesting. Form has light pink background and rounded fieldset to match your personal pink pages.

HTML – CODE :

<<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-3"</span>></span>
<span class="sc2"><<span class="kw2">form</span>></span>
<span class="sc2"><<span class="kw2">fieldset</span>><<span class="kw2">legend</span>></span>Personal<span class="sc2"><<span class="sy0">/</span><span class="kw2">legend</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field1"</span>><<span class="kw2">span</span>></span>Name <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"input-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field1"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field2"</span>><<span class="kw2">span</span>></span>Email <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"input-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field2"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field3"</span>><<span class="kw2">span</span>></span>Phone <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"input-field"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field3"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field4"</span>><<span class="kw2">span</span>></span>Subject<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">select</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field4"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"select-field"</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Appointment"</span>></span>Appointment<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Interview"</span>></span>Interview<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Regarding a post"</span>></span>Regarding a post<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">select</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">fieldset</span>></span>
<span class="sc2"><<span class="kw2">fieldset</span>><<span class="kw2">legend</span>></span>Message<span class="sc2"><<span class="sy0">/</span><span class="kw2">legend</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field6"</span>><<span class="kw2">span</span>></span>Message <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field6"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"textarea-field"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span>><<span class="kw2">span</span>></span><span class="sc1">&nbsp;</span><span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Submit"</span> <span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">fieldset</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>>[/css]</span>
<h3>CSS - CODE :</h3>
1</span>
<h3>Form Style 4 :</h3>
<ul>
	<li>This is another nice style with arsenic background color for your form. I tried to give it a little notebook look with dashed bottom borders on the fields.</li>
</ul>
<h3>HTML - CODE :</h3>
<span class="sc2">1<<span class="kw2">form</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-4"</span> <span class="kw3">action</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">method</span><span class="sy0">=</span><span class="st0">"post"</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field1"</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Enter Your Name<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field1"</span> required<span class="sy0">=</span><span class="st0">"true"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field2"</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Email Address<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field2"</span> required<span class="sy0">=</span><span class="st0">"true"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field3"</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Short Subject<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field3"</span> required<span class="sy0">=</span><span class="st0">"true"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"field4"</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Message to Us<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field4"</span> <span class="kw3">onkeyup</span><span class="sy0">=</span><span class="st0">"adjust_textarea(this)"</span> required<span class="sy0">=</span><span class="st0">"true"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span><span class="sc1">&nbsp;</span><span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Send Letter"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>>

CSS – CODE :


<style type<span class="sy0">=</span><span class="st0">"text/css"</span><span class="sy0">></span>
.form-style-<span class="nu0">4</span><span class="br0">{</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">450px</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#495C70</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">30px</span> <span class="re3">30px</span> <span class="re3">15px</span> <span class="re3">30px</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">5px</span> <span class="kw2">solid</span> <span class="re0">#53687E</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>submit<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>button<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="kw2">text</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>email<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> textarea<span class="sy0">,</span>
<span class="re1">.form-style-4</span> label
<span class="br0">{</span>
<span class="kw1">font-family</span><span class="sy0">:</span> Georgia<span class="sy0">,</span> <span class="st0">"Times New Roman"</span><span class="sy0">,</span> Times<span class="sy0">,</span> <span class="kw2">serif</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>

<span class="br0">}</span>
<span class="re1">.form-style-4</span> label <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span><span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-4</span> label <span class="sy0">></span> span<span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">150px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="kw2">text</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>email<span class="br0">]</span>
<span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">transparent</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">dashed</span> <span class="re0">#83A4C5</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">275px</span><span class="sy0">;</span>
<span class="kw1">outline</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">0px</span> <span class="re3">0px</span> <span class="re3">0px</span> <span class="re3">0px</span><span class="sy0">;</span>
<span class="kw1">font-style</span><span class="sy0">:</span> <span class="kw2">italic</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-4</span> textarea<span class="br0">{</span>
<span class="kw1">font-style</span><span class="sy0">:</span> <span class="kw2">italic</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">0px</span> <span class="re3">0px</span> <span class="re3">0px</span> <span class="re3">0px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">transparent</span><span class="sy0">;</span>
<span class="kw1">outline</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">dashed</span> <span class="re0">#83A4C5</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">275px</span><span class="sy0">;</span>
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
resize<span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span><span class="re3">20px</span><span class="sy0">;</span>
<span class="br0">}</span>

<span class="re1">.form-style-4</span> textarea<span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="kw2">text</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>email<span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>email<span class="br0">]</span> <span class="re2">:focus
</span><span class="br0">{</span>
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">dashed</span> <span class="re0">#D9FFA9</span><span class="sy0">;</span>
<span class="br0">}</span>

<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>submit<span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>button<span class="br0">]</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#576E86</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">8px</span> <span class="re3">10px</span> <span class="re3">8px</span> <span class="re3">10px</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#A8BACE</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>submit<span class="br0">]</span><span class="re2">:hover</span><span class="sy0">,</span>
<span class="re1">.form-style-4</span> input<span class="br0">[</span>type<span class="sy0">=</span>button<span class="br0">]</span><span class="re2">:hover</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#394D61</span><span class="sy0">;</span>
<span class="br0">}</span>
</style<span class="sy0">>

JAVASCRIPT – CODE :

<</span>script type<span class="sy0">=</span><span class="st0">"text/javascript"</span><span class="sy0">></span>
<span class="co1">//auto expand textarea</span>
<span class="kw2">function</span> adjust_textarea<span class="br0">(</span>h<span class="br0">)</span> <span class="br0">{</span>
h.<span class="me1">style</span>.<span class="me1">height</span> <span class="sy0">=</span> <span class="st0">"20px"</span><span class="sy0">;</span>
h.<span class="me1">style</span>.<span class="me1">height</span> <span class="sy0">=</span> <span class="br0">(</span>h.<span class="me1">scrollHeight</span><span class="br0">)</span><span class="sy0">+</span><span class="st0">"px"</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="sy0"></</span>script<span class="sy0">>

Form Style 5 :

  • Originally inspired by a codepen example, this form looks great on similar soft background. I think it is ideal for sign-up forms.

HTML – CODE :

<<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-5"</span>></span>
<span class="sc2"><<span class="kw2">form</span>></span>
<span class="sc2"><<span class="kw2">fieldset</span>></span>
<span class="sc2"><<span class="kw2">legend</span>><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"number"</span>></span>1<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span> Candidate Info<span class="sc2"><<span class="sy0">/</span><span class="kw2">legend</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field1"</span> placeholder<span class="sy0">=</span><span class="st0">"Your Name *"</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field2"</span> placeholder<span class="sy0">=</span><span class="st0">"Your Email *"</span>></span>
<span class="sc2"><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field3"</span> placeholder<span class="sy0">=</span><span class="st0">"About yourself"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"job"</span>></span>Interests:<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">select</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"job"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field4"</span>></span>
<span class="sc2"><<span class="kw2">optgroup</span> <span class="kw3">label</span><span class="sy0">=</span><span class="st0">"Indoors"</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"fishkeeping"</span>></span>Fishkeeping<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"reading"</span>></span>Reading<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"boxing"</span>></span>Boxing<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"debate"</span>></span>Debate<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"gaming"</span>></span>Gaming<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"snooker"</span>></span>Snooker<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"other_indoor"</span>></span>Other<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">optgroup</span>></span>
<span class="sc2"><<span class="kw2">optgroup</span> <span class="kw3">label</span><span class="sy0">=</span><span class="st0">"Outdoors"</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"football"</span>></span>Football<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"swimming"</span>></span>Swimming<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"fishing"</span>></span>Fishing<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"climbing"</span>></span>Climbing<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"cycling"</span>></span>Cycling<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="kw2">option</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"other_outdoor"</span>></span>Other<span class="sc2"><<span class="sy0">/</span><span class="kw2">option</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">optgroup</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">select</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">fieldset</span>></span>
<span class="sc2"><<span class="kw2">fieldset</span>></span>
<span class="sc2"><<span class="kw2">legend</span>><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"number"</span>></span>2<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span> Additional Info<span class="sc2"><<span class="sy0">/</span><span class="kw2">legend</span>></span>
<span class="sc2"><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field3"</span> placeholder<span class="sy0">=</span><span class="st0">"About Your School"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">fieldset</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Apply"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>>

CSS – CODE :


<style type<span class="sy0">=</span><span class="st0">"text/css"</span><span class="sy0">></span>
.form-style-<span class="nu0">5</span><span class="br0">{</span>
<span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">500px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">10px</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#f4f7f8</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">10px</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#f4f7f8</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span>
<span class="kw1">font-family</span><span class="sy0">:</span> Georgia<span class="sy0">,</span> <span class="st0">"Times New Roman"</span><span class="sy0">,</span> Times<span class="sy0">,</span> <span class="kw2">serif</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-5</span> fieldset<span class="br0">{</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-5</span> legend <span class="br0">{</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">1.4em</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-5</span> label <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"text"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"date"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"datetime"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"email"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"number"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"search"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"time"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"url"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> textarea<span class="sy0">,</span>
<span class="re1">.form-style-5</span> select <span class="br0">{</span>
<span class="kw1">font-family</span><span class="sy0">:</span> Georgia<span class="sy0">,</span> <span class="st0">"Times New Roman"</span><span class="sy0">,</span> Times<span class="sy0">,</span> <span class="kw2">serif</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> rgba<span class="br0">(</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span>.1<span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">4px</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">outline</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">7px</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#e8eeef</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span><span class="re0">#8a97a0</span><span class="sy0">;</span>
-webkit-box-shadow<span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1px</span> <span class="nu0">0</span> rgba<span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0.03</span><span class="br0">)</span> <span class="kw2">inset</span><span class="sy0">;</span>
box-shadow<span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1px</span> <span class="nu0">0</span> rgba<span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0.03</span><span class="br0">)</span> <span class="kw2">inset</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">30px</span><span class="sy0">;</span>

<span class="br0">}</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"text"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"date"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"datetime"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"email"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"number"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"search"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"time"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"url"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> textarea<span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> select<span class="re2">:focus</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#d2d9dd</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-5</span> select<span class="br0">{</span>
-webkit-appearance<span class="sy0">:</span> menulist-button<span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span><span class="re3">35px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-5</span> <span class="re1">.number</span> <span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#1abc9c</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">30px</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">30px</span><span class="sy0">;</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">0.8em</span><span class="sy0">;</span>
<span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">4px</span><span class="sy0">;</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">30px</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1px</span> <span class="nu0">0</span> rgba<span class="br0">(</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">0.2</span><span class="br0">)</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">15px</span> <span class="re3">15px</span> <span class="re3">15px</span> <span class="re3">0px</span><span class="sy0">;</span>
<span class="br0">}</span>

<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"submit"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"button"</span><span class="br0">]</span>
<span class="br0">{</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">19px</span> <span class="re3">39px</span> <span class="re3">18px</span> <span class="re3">39px</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#FFF</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#1abc9c</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">18px</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="kw1">font-style</span><span class="sy0">:</span> <span class="kw2">normal</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#16a085</span><span class="sy0">;</span>
<span class="kw1">border-width</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"submit"</span><span class="br0">]</span><span class="re2">:hover</span><span class="sy0">,</span>
<span class="re1">.form-style-5</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"button"</span><span class="br0">]</span><span class="re2">:hover
</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#109177</span><span class="sy0">;</span>
<span class="br0">}</span>
</style<span class="sy0">>

Form Style 6 :

  • It’s a simple form with large input fields. It can be used as starting point for your next great form design.

HTML – CODE :

<<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-6"</span>></span>
<span class="sc2"><<span class="kw2">h1</span>></span>Contact Us<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>></span>
<span class="sc2"><<span class="kw2">form</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field1"</span> placeholder<span class="sy0">=</span><span class="st0">"Your Name"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field2"</span> placeholder<span class="sy0">=</span><span class="st0">"Email Address"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"field3"</span> placeholder<span class="sy0">=</span><span class="st0">"Type your Message"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Send"</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>>


CSS – CODE :


<style type<span class="sy0">=</span><span class="st0">"text/css"</span><span class="sy0">></span>
.form-style-<span class="nu0">6</span><span class="br0">{</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">95%</span> Arial<span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">400px</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">10px</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#F7F7F7</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-6</span> h1<span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#43D1AF</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">20px</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">140%</span><span class="sy0">;</span>
<span class="kw1">font-weight</span><span class="sy0">:</span> <span class="nu0">300</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">-16px</span> <span class="re3">-16px</span> <span class="re3">16px</span> <span class="re3">-16px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"text"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"date"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"datetime"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"email"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"number"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"search"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"time"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"url"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> textarea<span class="sy0">,</span>
<span class="re1">.form-style-6</span> select
<span class="br0">{</span>
-webkit-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
-moz-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
-ms-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
-o-transition<span class="sy0">:</span> all 0.30s ease-in-out<span class="sy0">;</span>
<span class="kw1">outline</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">4%</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#ccc</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">3%</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#555</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">95%</span> Arial<span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"text"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"date"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"datetime"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"email"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"number"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"search"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"time"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"url"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> textarea<span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> select<span class="re2">:focus
</span><span class="br0">{</span>
box-shadow<span class="sy0">:</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">5px</span> <span class="re0">#43D1AF</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">3%</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#43D1AF</span><span class="sy0">;</span>
<span class="br0">}</span>

<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"submit"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"button"</span><span class="br0">]</span><span class="br0">{</span>
box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">3%</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#43D1AF</span><span class="sy0">;</span>
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#30C29E</span><span class="sy0">;</span>
<span class="kw1">border-top-style</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">border-right-style</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">border-left-style</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"submit"</span><span class="br0">]</span><span class="re2">:hover</span><span class="sy0">,</span>
<span class="re1">.form-style-6</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"button"</span><span class="br0">]</span><span class="re2">:hover</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#2EBC99</span><span class="sy0">;</span>
<span class="br0">}</span>
</style<span class="sy0">>

Form Style 7 :

  • It is also inspired by a form example. It looks simple, yet sophisticated with rounded border and small info-box below fields.

HTML – CODE :

<<span class="kw2">form</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"form-style-7"</span>></span>
<span class="sc2"><<span class="kw2">ul</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"name"</span>></span>Name<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"name"</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">"100"</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Enter your full name here<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"email"</span>></span>Email<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">"100"</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Enter a valid email address<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"url"</span>></span>Website<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"url"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"url"</span> <span class="kw3">maxlength</span><span class="sy0">=</span><span class="st0">"100"</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Your website address (eg: http://www.google.com)<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"bio"</span>></span>About You<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span>
<span class="sc2"><<span class="kw2">textarea</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"bio"</span> <span class="kw3">onkeyup</span><span class="sy0">=</span><span class="st0">"adjust_textarea(this)"</span>><<span class="sy0">/</span><span class="kw2">textarea</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>Say something about yourself<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Send This"</span> ></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>>

CSS – CODE :


<style type<span class="sy0">=</span><span class="st0">"text/css"</span><span class="sy0">></span>
.form-style-<span class="nu0">7</span><span class="br0">{</span>
<span class="kw1">max-width</span><span class="sy0">:</span><span class="re3">400px</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span><span class="re3">50px</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">font-family</span><span class="sy0">:</span> Georgia<span class="sy0">,</span> <span class="st0">"Times New Roman"</span><span class="sy0">,</span> Times<span class="sy0">,</span> <span class="kw2">serif</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> h1<span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">0px</span> <span class="re3">0px</span> <span class="re3">20px</span> <span class="re3">0px</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#5C5C5C</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span><span class="kw2">x-large</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> ul<span class="br0">{</span>
<span class="kw1">list-style</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> li<span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">9px</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#DDDDDD</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">30px</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> li<span class="re2">:last-child</span><span class="br0">{</span>
<span class="kw1">border</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">0px</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> li <span class="sy0">></span> label<span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span>
<span class="kw1">margin-top</span><span class="sy0">:</span> <span class="re3">-19px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#FFFFFF</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">14px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="re3">5px</span> <span class="re3">2px</span> <span class="re3">5px</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#B9B9B9</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">14px</span><span class="sy0">;</span>
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
<span class="kw1">font-family</span><span class="sy0">:</span> Arial<span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"text"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"date"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"datetime"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"email"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"number"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"search"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"time"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"url"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"password"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> textarea<span class="sy0">,</span>
<span class="re1">.form-style-7</span> select
<span class="br0">{</span>
box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">outline</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">16px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">font-family</span><span class="sy0">:</span> Georgia<span class="sy0">,</span> <span class="st0">"Times New Roman"</span><span class="sy0">,</span> Times<span class="sy0">,</span> <span class="kw2">serif</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"text"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"date"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"datetime"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"email"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"number"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"search"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"time"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"url"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"password"</span><span class="br0">]</span><span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> textarea<span class="re2">:focus</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> select<span class="re2">:focus
</span><span class="br0">{</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> li <span class="sy0">></span> span<span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#F3F3F3</span><span class="sy0">;</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-9px</span> <span class="re3">-9px</span> <span class="re3">-9px</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#C0C0C0</span><span class="sy0">;</span>
<span class="kw1">font-family</span><span class="sy0">:</span> Arial<span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">11px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> textarea<span class="br0">{</span>
resize<span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"submit"</span><span class="br0">]</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"button"</span><span class="br0">]</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#2471FF</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">10px</span> <span class="re3">20px</span> <span class="re3">10px</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">3px</span> <span class="kw2">solid</span> <span class="re0">#5994FF</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#D2E2FF</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"submit"</span><span class="br0">]</span><span class="re2">:hover</span><span class="sy0">,</span>
<span class="re1">.form-style-7</span> input<span class="br0">[</span>type<span class="sy0">=</span><span class="st0">"button"</span><span class="br0">]</span><span class="re2">:hover</span><span class="br0">{</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#6B9FFF</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">}</span>
</style<span class="sy0">>

JAVASCRIPT – CODE :

<</span>script type<span class="sy0">=</span><span class="st0">"text/javascript"</span><span class="sy0">></span>
<span class="co1">//auto expand textarea</span>
<span class="kw2">function</span> adjust_textarea<span class="br0">(</span>h<span class="br0">)</span> <span class="br0">{</span>
h.<span class="me1">style</span>.<span class="me1">height</span> <span class="sy0">=</span> <span class="st0">"20px"</span><span class="sy0">;</span>
h.<span class="me1">style</span>.<span class="me1">height</span> <span class="sy0">=</span> <span class="br0">(</span>h.<span class="me1">scrollHeight</span><span class="br0">)</span><span class="sy0">+</span><span class="st0">"px"</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="sy0"></</span>script<span class="sy0">>
1 2 3 11