Skip to main content

How To Create A Form in HTML

By
There are so many Website which consists of some submission forms. Here we are giving one example how a submission form can be coded. Now Follow the Steps given below:

Step 1:
HTML Coding
<h3>Fill up the Submission Form Carefully</h3>
<form action="/">
<fieldset>
<label for="name">Name</label>
<input type="text"  id="name" class="form-text"/>
<p class="form-help">In Capital Letter</p>
</fieldset>

<fieldset>
<label for="email">Email Id</label>
<input type="email" id="email" class="form-text"/>
</fieldset>
<fieldset>
<label for="number">Mobile no.</label>
<input type="text"  id="name" class="form-text"/>
<p class="form-help">Please Specify Your Country Code</p>
</fieldset>
<fieldset>
<label for="gender">Gender</label>
<select id="gender">
<option>Male</option>
<option>Female</option>
</select>
</fieldset>
<fieldset>
<label for="language">Language Known</label>
<input type="text"  id="name" class="form-text"/>
<p class="form-help"></p>
</fieldset>
<fieldset class="radio">
<label for="skill">Physically Disorder</label>
<ul>
<li><label><input type="radio" name="notifications"/>Yes
</label></li>
<li><label><input type="radio" name="notifications"/>No
</label></li>

</ul>
</fieldset>
<fieldset>
<label for="address">Permanent Address</label>
<textarea id="address"></textarea>
</fieldset>

<fieldset>
<label for="bio">Bio</label>
<textarea id="bio"></textarea>
</fieldset>
<fieldset class="check">
<label><input type="checkbox"/>I accept the terms and of
services and lorem ipsum.</label>
</fieldset>
<fieldset class="form-action">
<input type="submit" value="submit"/>
</fieldset>
</form>




Step2:

CSS Coding

Now spice up your form with style sheets. Here is the sample of a style sheet  with CSS Coding.

label {font-size:14px;text-transform:uppercase;}
form fieldset{
margin:0 0 10px 0;
padding:10px 5px 5px 10px;
font-size:14px;
border-bottom:1px solid #292628;
}
form fieldset.form-actions{
margin:0 0 0 20%;
padding:0;
font-size:14px;
border:none;
}
form fieldset.check{
padding-left:20%;
}
form fieldset label{
float:left;
width:20%;
margin:4px 0 5px 0;
padding:0 0 10px 0;
font-weight:bold;
}
form fieldset.check label{
display:inline;
float:none;
width:auto;
font-weight:normal;
}
form fieldset.radio ul li label{
display:inline;
float:none;
width:auto;
font-weight:normal;
}
form fieldset input.form-text,
form fieldset textarea{
display:block;
width:50%;
padding:5px;
font-size:14px;
border:1px solid #030006;
background:#887681;
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
form fieldset input.form-text:focus{
border:1px solid #ccc;
background:#fff;
}
form fieldset textarea{
height:120px;
}
form fieldset select{
min-width:25%;
margin:0;
}
form fieldset.radio ul{
margin:5px 0 0 20%;
}
form fieldset.radio ul li{
margin:0 0 5px 0;
}
form fieldset.radio ul li:last-child{
margin:0;
}
form fieldset p.form-help{
margin:5px 0 0 20%;
font-size:12px;
color:#999;
}
form input[type="submit"]{
margin:0;
padding:5px 10px;
font-size:12px;
font-weight:bold;
border:1px solid #ccc;
background:#eee;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
form input[type="submit"]:hover,
form input[type="submit"]:focus{
border:1px solid #bbb;
background:#DBD6D9;
}
form input[type="submit"]:active{
border:1px solid #ccc;
background:#eee;
}
@media screen and (max-width:600px){
form fieldset label{
display:block;
float:none;
width:auto;
margin:0 0 5px 0;
}
form fieldset.form-action,
form fieldset.check,
form fieldset.radio ul,
form fieldset p.form-help{
margin-left:0;
padding-left:0;
}
form fieldset input.form-text,
form fieldset textarea{
width:100%;
-webkit-box-sizing:border-box;
-moz-sizing:border-box;
}
The screenshot of the above form will look as below

Now we can see a complete submission form

Labels:

Comments

Post a Comment

Popular posts from this blog

Add stylish search box to your blog

By
A search box helps visitors to access specific information on your website or blog. So adding a search engine enhances blog page view & keep readers stick to the site. Here is the code for search box. <style> #abt-search-btn {     background: none repeat scroll 0 0 #359BED;     border: 0 none;     border-radius: 0 0 0 0;     color: #FFFFFF;     font-weight: 700;     padding: 10px 20px; } #abt-search-box {     background: none repeat scroll 0 0 #EEEEEE;     border: 0 none;     padding: 10px;     width: 250px; } </style> <form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="abt-search-box" name="q" size="40" type="text" placeholder="  imzas "/> <input id="abt-search-btn" value="Search" type="submit"/> </form>
Post a Comment
Read more

THE MYSTERIOUS TREE BARK SKIN DISORDERS

By
The tree bark skin disorder is a dreadful disease. This disease gradually transfigures the human skin in tree like gesture.  It is said that this terrifying disease is incurable still now. This disease naturally happens to see in one (1) among 600000 people. It mutates one's skin into tree bark. In the past life soldiers often inserted tree’s barks, darts, worms and other organic material into their skin so that they could be a part of their environment and to make themselves hide from enemy. The Mongols in Asia, the Huns in Europe and the Vandals in African soldiers always used this process.   The tree man like syndrome concept has been going on from the past. In the past people were inserted various vermin, insects in their skin intentionally and from then tree man syndrome relation is prevailing. This future intentional exploitation is the present causes of this disease.The Human Papillomavirus physically case this disease.It starts with a single warts and cotinued the pro...
Post a Comment
Read more

GAUHATI HIGH COURT DECLARES CBI ILLEGAL

By
Gauhati High Court declares India’s premier investigation agency, the Central Bureau of Investigation(C.B.I), as unconstitutional on 6th November, 2013.  But honorable Supreme Court stays the order on Gauhati High Court’s declaration of entitling C.B.I as unconstitutional on Saturday which gave some relief to the CBI & Central Government both. UPA Govt. has already filed a case challenging GC's declaration. C.B.I was created by a home ministry resolution on 1st April, 1963 and it functions under Delhi Special Police Establishment Act (DSPE) 1946.   “The judgment is patently wrong. It should be set aside. We are certainly going to challenge it and the appeal is likely to be filled in the SC” said additional solicitor general PP Malhotra (source-HINDUSTAN TIME). The petition was filed by Attorney General Golam E Vahanvati on behalf of the Govt. of India seeking urgent hearing over the petition. The hearing was conducted at the residence of the Chief Justice of India.  T...
Post a Comment
Read more