Hello everyone , In my previous blog I have discussed about a new technology introduced by Microsoft i.e METRO UI.

I hope you all have got an overview about METRO UI which I have discussed in my previous block.

But ,  today I will discuss how can we the various input fields in a form using METRO UI.

As METRO UI CSS is a framework for developing projects on the web in Window Metro Style.

By using this framework ,  we can style various input fields that are needed in creating any form such as text ,  password ,  checkbox etc.

The METRO UI CSS provide a tool for styling the input fields and help them to give an additional feature.

For  creating the Input Fields that can be made using multiple ways such as if we need to create a simple input text and password ,  an input with a placeholder ,  we can also create a Readonly input.

Now below is the syntax that can be used to create following input fields ,  these are as follows :-

• For simple text input -:

<!-- input[type=text] -->

<div class="input-control text">

<input type="text">

</div>

• For simple password input -:

<!-- input[type=password] -->

<div class="input-control password">

<input type="password">

</div>

• Input with placeholder -:

<!-- input with placeholder -->

<div class="input-control text">

<input type="text" placeholder="Input you text here...">

</div>

• Input with ReadOnly Input -:

<!-- readonly input -->

<div class="input-control text">

<input type="text" readonly>

</div>

• Input with Disable Input -:

<!-- disabled input -->

<div class="input-control text">

<input type="text" disabled>

</div>

Now ,  moving forward while creating forms we need to add checkbox and radio buttons in various fields .

In METRO UI we can also create small checkbox and radio buttons, below is the syntax for the following :-

• For checkbox :-

<!-- Checkbox -->

<label class="input-control checkbox">

<input type="checkbox" checked>

<span class="check"></span>

<span class="caption">Checkbox</span>

</label>

• For creating small checkbox -:

<!-- Small Checkbox -->

<label class="input-control checkbox small-check">

<input type="checkbox" checked>

<span class="check"></span>

<span class="caption">Checkbox</span>

</label>

• For creating Radio Buttons -:

<!-- Radio button -->

<label class="input-control radio">

<input type="radio">

<span class="check"></span>

<span class="caption">Radio</span>

</label>

• For creating small Radio Button -:

<!-- Small radio button -->

<label class="input-control radio small-check">

<input type="radio">

<span class="check"></span>

<span class="caption">Small radio</span>

</label>

The form also includes textarea whose height can be resized ,  below is the syntax for it -

<div class="input-control textarea">

<textarea></textarea>

</div>

<div class="input-control textarea"

data-role="input" data-text-auto-resize="true">

<textarea></textarea>

</div>

<div class="input-control textarea"

data-role="input" data-text-auto-resize="true" data-text-max-height="200">

<textarea></textarea>

</div>

We can also create buttons such as reset and submit button ,  below is the syntax for it :-

<input type="button" value="Button">

<input type="reset" value="Reset">

<input type="submit" value="Submit">

We can also create text fields with various  states such as error, success, warning and info that contains different color here is the syntax for it -:

• For Error :-

<div class="input-control text error">

<input type="text">

</div>

• For Warning :-

<div class="input-control text warning">

<input type="text">

</div>

• For Success :-

<div class="input-control text success">

<input type="text">

</div>

• For Required :-

<div class="input-control text info">

<input type="text">

</div>