CSS Stylish Forms
CSS Stylish Forms
<html>
<head>
<title>HTML Forms </title>
<style>
.form-style{
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-heading{
font-weight: bold;
font-style: italic;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
font-size: 15px;
padding-bottom: 3px;
}
.form-style label{
display: block;
margin: 0px 0px 15px 0px;
}
.form-style label > span{
width: 100px;
font-weight: bold;
float: left;
padding-top: 8px;
padding-right: 5px;
}
.form-style span.required{
color:red;
}
.form-style .tel-number-field{
width: 40px;
text-align: center;
}
.form-style input.input-field, .form-style .select-field{
width: 48%;
}
.form-style input.input-field,
.form-style .tel-number-field,
.form-style .textarea-field,
.form-style .select-field{
box-sizing: border-box;
border: 1px solid black;
box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
padding: 7px;
outline: none;
}
.form-style .input-field:focus,
.form-style .tel-number-field:focus,
.form-style .textarea-field:focus,
.form-style .select-field:focus{
border: 1px solid orange;
}
.form-style .textarea-field{
height:100px;
width: 55%;
}
.form-style input[type=submit],
.form-style input[type=button]{
border: none;
padding: 8px 15px 8px 15px;
background: orange;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
}
.form-style input[type=submit]:hover,
.form-style input[type=button]:hover{
background: brown;
color: #fff;
}
</style>
</head>
<body>
<div class="form-style">
<div class="form-style-heading">Provide your information</div>
<form action="" method="post">
<label for="field1"><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="field1" value="" /></label>
<label for="field2"><span>Email <span class="required">*</span></span><input type="text" class="input-field" name="field2" value="" /></label>
<label><span>Telephone</span><input type="text" class="tel-number-field" name="tel_no_1" value="" maxlength="8" />-<input type="text" class="tel-number-field" name="tel_no_2" value="" maxlength="8" />-<input type="text" class="tel-number-field" name="tel_no_3" value="" maxlength="25" /></label>
<label for="field4"><span>Regarding</span><select name="field4" class="select-field">
<option value="General Question">India</option>
<option value="Advertise">Pakistan</option>
<option value="Partnership">U.S.A.</option>
</select></label>
<label for="field5"><span>Message <span class="required">*</span></span><textarea name="field5" class="textarea-field"></textarea></label>
<label><span> </span><input type="submit" value="Submit" /></label>
</form>
</div>
</body>
</html>
<html>
<head>
<title>HTML Forms </title>
<style>
.form-style{
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-heading{
font-weight: bold;
font-style: italic;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
font-size: 15px;
padding-bottom: 3px;
}
.form-style label{
display: block;
margin: 0px 0px 15px 0px;
}
.form-style label > span{
width: 100px;
font-weight: bold;
float: left;
padding-top: 8px;
padding-right: 5px;
}
.form-style span.required{
color:red;
}
.form-style .tel-number-field{
width: 40px;
text-align: center;
}
.form-style input.input-field, .form-style .select-field{
width: 48%;
}
.form-style input.input-field,
.form-style .tel-number-field,
.form-style .textarea-field,
.form-style .select-field{
box-sizing: border-box;
border: 1px solid black;
box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
padding: 7px;
outline: none;
}
.form-style .input-field:focus,
.form-style .tel-number-field:focus,
.form-style .textarea-field:focus,
.form-style .select-field:focus{
border: 1px solid orange;
}
.form-style .textarea-field{
height:100px;
width: 55%;
}
.form-style input[type=submit],
.form-style input[type=button]{
border: none;
padding: 8px 15px 8px 15px;
background: orange;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
}
.form-style input[type=submit]:hover,
.form-style input[type=button]:hover{
background: brown;
color: #fff;
}
</style>
</head>
<body>
<div class="form-style">
<div class="form-style-heading">Provide your information</div>
<form action="" method="post">
<label for="field1"><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="field1" value="" /></label>
<label for="field2"><span>Email <span class="required">*</span></span><input type="text" class="input-field" name="field2" value="" /></label>
<label><span>Telephone</span><input type="text" class="tel-number-field" name="tel_no_1" value="" maxlength="8" />-<input type="text" class="tel-number-field" name="tel_no_2" value="" maxlength="8" />-<input type="text" class="tel-number-field" name="tel_no_3" value="" maxlength="25" /></label>
<label for="field4"><span>Regarding</span><select name="field4" class="select-field">
<option value="General Question">India</option>
<option value="Advertise">Pakistan</option>
<option value="Partnership">U.S.A.</option>
</select></label>
<label for="field5"><span>Message <span class="required">*</span></span><textarea name="field5" class="textarea-field"></textarea></label>
<label><span> </span><input type="submit" value="Submit" /></label>
</form>
</div>
</body>
</html>
Comments
Post a Comment