<!DOCTYPE html>
<html>
<head>
<title>Checkboxes - Separate Names</title>
<style>
<style>
form {
max-width: 800px;
margin: 20px auto;
padding: 25px;
background: #f0faff;
border-radius: 10px;
}
fieldset {
margin: 15px 0;
padding: 15px;
border: 1px solid #b3d9ff;
border-radius: 10px;
background: #fff;
}
legend {
color: #0066cc;
font-weight: bold;
padding: 0 10px;
}
label {
margin: 10px 0;
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 8px;
border: 1px solid #99ccff;
border-radius: 4px;
box-sizing: border-box;
}
select[multiple] {
height: 95px;
}
.submit-area {
text-align: center;
margin-top: 20px;
}
input[type="submit"], input[type="reset"] {
background: #4CAF50;
color: white;
padding: 12px 25px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 0 10px;
}
input[type="reset"] {
background: #f44336;
}
</style>
</head>
<body bgcolor="lightyellow">
<h1><center>Customer Profile</center></h1>
<h3>Using CSS, and checkboxes with different names</h3>
<form method="POST" action="/~sultans/util/form/formTest.cgi">
<fieldset style='width:600px; border-color:gold'>
<legend>Enter Information Below</legend>
<label for="fullname"> <b>Full Name</b> </label>
<input type=text name=fullname id=fullname size=40 class=input>
<br><br>
<label for="addr"> <b>Enter Address... </b> </label>
<textarea name=address id=addr rows=5 cols=42 class=input></textarea>
<br><br>
<b>Enter Gender </b>
<input type=radio name=sex id=male value='M'><label for="male"> Male </label>
<input type=radio name=sex id=female value='F'><label for="female"> Female </label>
<br><br>
<b>Enter Status </b>
<input type=checkbox name=single id=sgl><label for="sgl"> Single </label>
<input type=checkbox name=married id=mrd><label for="mrd"> Married </label>
<input type=checkbox name=children id=chd><label for="chd"> With Children </label>
<br><br>
<label for="slctSingle"><b> Education... </label>
<select name=education id=slctSingle class=input style='width:160'>
<option id=none value='0'>--Choose from below--</option>
<option id=HS value='HS'>High School</option>
<option id=BS value='BS/BA'>Bachelor of Science/Art</option>
<option id=MS value='MS/MA'>Master of Science/Art</option>
<option id=PHD value='DR/PHD'>Doctor/PhD</option>
</select>
<br><br>
<label for="slctMulti"><b> Hobbies... </label>
<select name=hobby id=slctMulti size=3 multiple class=input style='width:160'>
<option id=read value='read'>Reading</option>
<option id=tv value='tv'>Television and Movies</option>
<option id=art value='art'>Art and Theatre</option>
<option id=sprt value='sport'>Playing Sports</option>
<option id=trvl value='travel'>Traveling</option>
<option id=shop value='shop'>Shopping</option>
<option id=slp value='sleep'>Relaxing and Sleeping</option>
</select>
<br><br>
<input type=submit value=' Go '>
<input type=reset value='Clear'>
</fieldset>
</form>
</body>
</html>