CSS

adplus-dvertising
Creating Form with the help of CSS
Previous Home Next

For creating form in HTML page CSS can help for making formatting to text, textbox and button in order to looks beautiful. Following code will help to create form. CSS code is given below-

<style type="text/css">
.feedbackform
{
padding: 5px;
}

div.fieldwrapper
{ 
width: 550px; 
overflow: hidden;
padding: 5px 0;
}

div.fieldwrapper label.styled
{ 
float: left;
width: 150px; 
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; 
}

div.fieldwrapper div.thefield
{ 
float: left;
margin-bottom: 10px; 
}

div.fieldwrapper div.thefield input[type="text"]
{
width: 250px;
}

div.fieldwrapper div.thefield textarea
{ 
width: 300px;
height: 150px;
}

div.buttonsdiv{
margin-top: 5px; 
}

div.buttonsdiv input{ 
width: 80px;
background: #e1dfe0;
}
</style>

HTML Code for this is given below-

<form class="feedbackform">

<div class="fieldwrapper">
<label for="username" class=
"styled">Your Name:</label>
<div class="thefield">
<input type="text" id=
"username" value="" 
size="30" />
</div>
</div>

<div class="fieldwrapper">
<label for="email" class=
"styled">Email address:</label>
<div class="thefield">
<input type="text" id=
"email" value="" 
size="30" /><br />
<span style="font-size: 80%"
>*Note: Please make sure it's correctly entered!</span>
</div>
</div>

<div class="fieldwrapper">
<label for="somehighschool" class=
"styled">education:</label>
<div class="thefield">
<ul style="margin-top:0;">
<li><input type="radio" id=
"somehighschool" name="education" 
value=""/> 

<label for="somehighschool"
>Some Highschool</label></li>
<li><input type="radio" id=
"highschool" name="education" 
value="" /
<label for="highschool"
>Highschool graduate</label></li>
<li><input type="radio" id=
"somecollege" name="education" 
value="" /> 
<label for="somecollege"
>Some college</label></li>
<li><input type="radio" id=
"vocation" name="education" 
value="" />
 <label for="vocation"
 >Vocation school</label></li>
<li><input type="radio" id=
"college" name="education" 
value="" /> 
<label for="college"
>College graduate or higher</label></li>
</ul>

</div>
</div>

<div class="fieldwrapper">
<label for="html" class=
"styled">Skills:</label>
<div class="thefield">
<ul style="margin-top:0;">
<li><input type="checkbox" id=
"html" name="skills" 
value="" /> 
<label for="html"
>HTML/ CSS</label></li>
<li><input type="checkbox" id=
"javascript" name="skills" 
value=""/> 
<label for="javascript"
>JavaScript</label></li>
<li><input type="checkbox" id=
"ajax" name="skills" 
value="" /> 
<label for="ajax"
>Ajax and XML</label></li>
<li><input type="checkbox" id=
"php" name="skills" 
value="" /> 
<label for="php"
>PHP and Database</label></li>
</ul>
<span style="font-size: 80%"
>* Please check all that apply.</span>
</div>
</div>

<div class="fieldwrapper">
<label for="agegroup" class=
"styled">Department:</label>
<div class="thefield">
<select id="agegroup">
<option value="2.1"
>HR department</option>
<option value="3"
>Sales</option>
<option value="4.1"
>Customer Service/ Support</option>
<option value="5.2"
>Accounting</option>
</select>
</div>
</div>

<div class="fieldwrapper">
<label for="about" class=
"styled">About yourself:</label>
<div class="thefield">
<textarea id="about"></textarea>
</div>
</div>
<div class="buttonsdiv">
<input type="submit" value=
"Submit" style="margin-left: 150px;" 
/>
<input type="reset" value=
"Reset" />
</div>
</form>

output

Previous Home Next