Form Samples
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label {
display: inline-block;
width: 20%;
}
fieldset {
background: #AFB8C1;
}
legend {
padding: 10px 0;
font-size: 30px;
}
</style>
</head>
<body>
<fieldset>
<h1>Registration Form: </h1>
</fieldset> <br>
<form action="/form/submit" method="get">
<fieldset>
<Legend > Personal Information </legend>
<label>Your Name:</label>
<input type="text" name="first_name" placeholder="Enter firstname" />
<br/>
<br/>
<label>Your Surname:</label>
<input type="text" name="last_name" /><br><br>
<label>Your Age:</label>
<input type="number" name="age" />
<br/>
<br/>
<br/>
<label>Choose your Gender:</label>
<input type="radio" name="gender" value="female" /> Female
<input type="radio" name="gender" value="male"/> male
<br/>
<br/>
</fieldset>
<fieldset>
<Legend > Contact Information </legend>
<label>Enter Your E-Mail:</label>
<input type="email" name="user_email" /> <br/> <br/>
<label>Enter Your Password:</label>
<input type="password" name="pass" /> <br/> <br/>
<label>Enter Your Birthday:</label>
<input type="date" name="bday" /> <br/> <br/>
<label>Enter Your Birthday Month:</label>
<input type="month" name="bday" /> <br/> <br/>
<label>Enter Your Week:</label>
<input type="weel" name="bday" /> <br/> <br/>
<label>Login Time:</label>
<input type="Time" name="time" /> <br/> <br/>
<label>Enter Your Schedule:</label>
<input type="DateTime" name="dtime" /> <br/> <br/>
<label>Upload your photo:</label>
<input type="Image" name="photo" /> <br/> <br/>
<label>Upload your resume:</label>
<input type="file" name="resume" /> <br/> <br/>
</fieldset><br>
<fieldset>
<Legend > Message </legend>
<label>Choose your favorite Color:</label>
<input type="checkbox" name="fav" value="Red\" /> Red
<input type="checkbox" name="fav" value="Green"/> Green
<input type="checkbox" name="fav" value="Red\" /> Blue
<input type="checkbox" name="fav" value="Green"/> Pink
<br/>
<br/>
<label>Choose Color:</label>
<input type="Color" name="color" /> <br><br>
<label>Choose URL:</label>
<input type="url" name="color" /> <br><br>
<label>Choose Country:</label>
<select>
<option >America</option>
<option >Belgium</option>
<option >China</option>
<option >Korea</option>
<option >Philippines</option>
</select> <br><br>
<label>Enter your Message :</label>
<textarea rows=5 cols =100 > </textarea> <br><br>
<label>Search Information:</label>
<input type="search" name="searcher" /> <br><br>
<label>Range:</label><input type="range" name="range" />
<br/>
<br/>
<input type="submit" name="searcher" value ="Submit"/>
<input type="reset" name="reset" value ="Reset"/>
<br/>
<br/>
<br/>
<br/>
</fieldset>
</body>
</html>
Comments
Post a Comment