Monday 20 February 2012

css and html code for an html form

HTML Forms

HTML forms are used to pass data to a web server or mail server.






























Code below produces the above out put. Click here for going to detail page

<head>
<style type="text/css">
/* ----------- stylized ----------- */
label
{
width: 9em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.submit
{
margin-left: 11.5em;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351;
}
textarea{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
select {
color: #781351;
background: #fee3ad;
border: 1px solid #781351;
margin-right: 2px
}
.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 30em;
margin:0 auto;
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
</style>
</head>


<body>

<fieldset>
<legend>This is my form</legend>
<form action="" method="post" name="first_form" enctype="multipart/form-data" onsubmit="validation()">
<p><label for="email">Email:</label><input type="text" name="email" maxlength="50"  value="" class="input"/></p>
<p><label for="password" >Password:</label><input type="password" name="password" class="input"/></p>
<p><label for="confirm_password" >Confirm Password:</label><input type="password" name="confirm_password" class="input"/></p>
<p><label for="file">Upload Your Picture:</label><input type="file" name="userfile" class="input" /></p>
<input type="hidden" name="actionflag" value="save" />
<input type="hidden" name="chech_file_size" value="5000"/>
<p><label for="gender">Gender:</label><input type="radio" name="gender" value="male" />Male<input type="radio" name="gender" value="female" class="input" />Female<br /></p>
<p><label for="country">Select Country:</label><select name="country">
<option value="UK">United Kingdom</option>
<option value="USA">United States of America</option>
<option value="SA">south Africa </option>
</select></p>
<p><label for="hobby">Hobby:</label><input type="checkbox" name="cricket" value="cricket" />Cricket<input type="checkbox" name="football" value="football" />Football</p>
<p><label for="address">Address</label><textarea rows="6" cols="25" name="address"></textarea></p>
<p><input type="submit" value="Submit" class="submit"/></p>
</form>
</fieldset>
</body>
</html>

0 comments:

Post a Comment