<!DOCTYPE html>
<html>
<head>
<title>Form Elements and Attributes </title>
<style> //format and styles
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<form action="/form/submit" method="GET or POST" >
<fieldset>
<legend>Personal Information:</legend>
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br/><br/>
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br/><br/>
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required> <br/><br/>
<label for="Birthday"> Birthday </label>
<input type="date" placeholder="Birthday" name="Birthday" required> <br/><br/>
<label for="Username"> Username </label>
<input type="text" placeholder="Username" name="Username" required> <br/><br/>
<label for="Password"> Password </label>
<input type="Password" placeholder="Enter Password" name="Password" required> <br/><br/>
<label for="Confirm Password">Confirm Password </label>
<input type="Password" placeholder="Confirm Password" name="Confirm Password" required> <br/><br/>
</fieldset>
<fieldset>
<legend>Gender :</legend>
<input type="radio" placeholder="Male" name="Gender" required> Male <br/><br/>
<input type="radio" placeholder="FeMale" name="Gender" required> FeMale <br/><br/>
</fieldset>
<fieldset>
<legend>Talents/Skills :</legend>
<input type="checkbox" placeholder="Drawing " name="Talents" required> Drawing <br/><br/>
<input type="checkbox" placeholder="Photography" name="Talents" required> Phorography <br/><br/>
</fieldset>
<fieldset>
<legend>Message :</legend>
<label for="course">Course </label>
:<select name="list" id="list" width=10px >
<option value="MMA">MMA</option>
<option value="BSPSY">BSPSYL</option>
<option value="BEED">BEED</option>
<option value="BSED">BSED</option>
<option value="js">JavaScript</option>
</select><br><br>
<label for="Photo">Upload a Photo </label>
<input type="file" placeholder="Upload a picture " name="Photo" required> <br/><br/>
<label for="Color">Color </label>
<input type="color" placeholder="color" name="color" > <br/><br/>
<textarea name="Comment" rows="3" cols="30" placeholder="Type some text here"></textarea><br/>
<input type="submit" value="Submit"/>
<input type="Reset" value="Reset"/>
</fieldset>
</form>
<script >
document.write
</body>
</html>
Comments
Post a Comment