Untitled

<!DOCTYPE html>
<html>
<head>
	<title>employee info</title>
</head>
<body>
	<form action="#" method="get">
		<fieldset class="personal_info">
			<legend>Personal Info:(form element)</legend>
			<p>
				<label for="fname">first name:</label>
				<input type="text" name="fname" id="fname" maxlength="20" size="20">
			</p>
			<p>
				<label for="lname">last name:</label>
				<input type="text" name="lname" id="lname" maxlength="20" size="20">
			</p>
			<p>
				<label for="password">passord:</label>
				<input type="password" name="password" id="password" maxlength="20" size="20">
			</p>
			<p>
				<label for="email">email:</label>
				<input type="email" name="email" id="email" maxlength="20" size="20">
			</p>
			<p>
				<label for="department">select department:</label>
				<select name="department" multiple size="3">
					<optgroup label="MCA">
						<option value="computerscience" selected="selected">computer science</option>
						<option value="web">web design</option>
					</optgroup>
					<optgroup label="B-TECH">
						<option value="math">math</option>
						<option value="phisics">phisics</option>
					</optgroup>
				</select>
			</p>
			<p>
				<label for="gender">gender:</label>
				<input type="radio" name="gender" value="male" checked="checked">male
				<input type="radio" name="gender" value="female">female
			</p>
			<p>
			<label for="upload">upload file:</label>
			<input type="file" name="upload" size="50"><!-- size means char-->
			</p>
			<p>
				<label for="address1">address line 1:</label>
				<input type="text" name="address1" id="address1" maxlength="20" size="20">
			</p>
			<p>
				<label for="address2">address line 2:</label>
				<textarea name="address2" id="address2" rows="10"  cols="18"></textarea>
			</p>
		</fieldset>

		<br>
		<fieldset>
			<legend>Hobbies:</legend>
				<input type="checkbox" name="cricket" id="cricket" value="cricket" checked="checked">
				<label for="cricket">cricket</label>

				<input type="checkbox" name="football"   id="football" value="football">
				<label for="football">football</label>

				<input type="checkbox" name="race" id="race" value="race">
				<label for="race">race</label>

				<input type="checkbox" name="reading" id="reading"value="reading">
				<label for="reading">reading</label>
		</fieldset>
			<!-- form submit area-->
			<!-- <input type="button" name="" value="submit"/> --><!--  general button-->
			<input type="submit" name="" value="submit"> <!--  submit form-->
			<input type="reset" name="reset"> <!--  reset form-->

	</form>

</body>
</html>
<style type="text/css">
	.personal_info label{
		float: left;
		width: 150px;
		/* text-align: right;
		margin-right: 10px; */
	}
	fieldset{
		width: 420px;
		background-color: #fff;
	}
	fieldset legend{
		font-weight: bold;
	}
</style>