Thursday, June 26, 2014

Source Code - HTML Forms and CSS


Background Details Male Female 18-30 31-40
Additional Information

Source Code for HTML Forms and CSS

<style>
body    {
    font-family:Tahoma, Geneva, sans-serif;
}

form    {
    border: 2px dotted #F60;
    background-color: #fde6ac;
    padding: 10px;
}

input, select {
    border: 1px solid #F60;
    background-color: #FC3;
    clear: both;
}

input#submit    {
    color: #F60;
    font-weight: bold;
}
   
label {
    padding-top: 10px;
    display: block;
    font-weight: bold;
}

legend {
    font-size: 14pt;
    font-weight: bold;
    color: #F60;
    display: block;

}
fieldset {
    border-width: 1px 0px 0px 0px;
    border-style: solid none none none;
    border-color: #F60;
    margin-bottom: 10px;
}
   
</style>

<form action="" name="registration">
<fieldset>
<legend>Background Details</legend>
<label for="name">Name:</label>
    <input name="name" type="text" />
<label for="gender">Gender:</label>
    <input name="gender" type="radio" value="Male" /> Male
    <input name="gender" type="radio" value="Female" /> Female
<label for="age">Age range:</label>
    <input name="age" type="checkbox" value="18-30" /> 18-30
    <input name="age" type="checkbox" value="31-40" /> 31-40
    </fieldset>
<fieldset>
<legend>Additional Information</legend>
<label for="password">Password:</label>
    <input name="password" type="password" />
<label for="resume">Resume Upload:</label>
    <input name="resume" type="file" />

<label for="color">Favorite color:</label>
    <select name="color" size="3"><option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option></select>
</fieldset>
<input type="submit" value="Submit" />
</form>

No comments: