<title>Form</title>
<style>
label{
display: block;
margin-bottom: 8px;
}
</style>
<fieldset>
<legend> Lengthy Registration Form</legend>
<form action="success.html" method="GET">
<!--Name-->
<label for="e_name">Name:
<input
name="e_name"
id="e_name"
type="text"
required
placeholder="Name">
</label>
<!--Email-->
<label for="e_mail">Email:
<input
name="e_mail"
id="e_mail"
type="email"
required
placeholder="[email protected]">
</label>
<!--Phone-->
<label for="e_phone">Phone:
<input
name="e_phone"
id="e_phone"
type="phone"
required
placeholder="+252615020879">
</label>
<!--password-->
<label for="e_mail">Password:
<input
name="e_password"
id="e_password"
type="password"
required
placeholder="Password">
</label>
<!--Website-->
<label for="e_mail">Website:
<input
name="e_url"
id="e_url"
type="url"
required
placeholder="https://www.AL-kheyr.com">
</label>
<!--Quantity-->
<label for="e_mail">Quantity:
<input
name="e_quantity"
id="e_quantity"
type="quantity"
required>
</label>
<!--date-->
<label for="e_date">Date:
<input name="e_date"
id="e_date"
type="date"
required>
</label>
<!--date readonly-->
<label for="e_date">Date:
<input name="e_date"
id="e_date"
type="date"
required
readonly>
</label>
<!--date disabled-->
<label for="e_date">Date:
<input name="e_date"
id="e_date"
type="date"
required
disabled>
</label>
<!--time-->
<label for="e_time">Time
<input name="e_time"
id="e_time"
type="time"
required>
</label>
<!--month-->
<label for="e_month">Month:
<input name="e_month"
id="e_month"
type="month"
required>
</label>
<!--week-->
<label for="e_week">Week:
<input name="e_week"
id="e_week"
type="week"
required>
</label>
<!--date time local-->
<label for="e_dtl">Date time local:
<input name="e_dtl"
id="e_dtl" type="datetime-local"
required>
</label>
<!--gender-->
<div>
<p>select Sex</p>
<label for="e_male">
<input name="male"
id="e_male" type="radio">Male
</label>
<label for="e_fale">
<input name="fale"
id="e_fale" type="radio">Fale
</label>
<p>Food Time Selection</p>
<!--Lunch-->
<label for="e_lunch">
<input name="lunch"
id="e_lunch" type="checkbox">Lunch
</label>
<!--Lunch-->
<label for="e_diner">
<input name="diner"
id="e_diner" type="checkbox">Dinner
</label>
</div>
<!--Search-->
<label for="e_search">Search:
<input name="search"
id="e_search" type="search"
placeholder="Searching" required>
<input type="submit" value="Search">
</label>
<!--upload-->
<p>Upload</p>
<label for="e_upload">Upload:
<input name="upload"
id="e_upload" type="File"
required
accept="image/*"
multiple>
<input type="submit" value="upload">
<!--Color-->
<p>Color</p>
<label for="e_color">Color:
<input name="color"
id="e_color" type="color"
required>
<input type="submit" value="selection">
</label>
<!--Selection-->
<p>Country selection</p>
<label for="e_country">
select country:
<select name="country"
id="e_upload" type="option"
required>
<option value="sl">Select:</option>
<option value="SO">Somalia</option>
<option value="US">United State</option>
<option value="UK">United Kingdom</option>
<option value="fr">france</option>
</select>
</label>
<!--Food Selection-->
<label for="e_food_selection">
food selection:
<select name="e_food_selection" id="e_food_selection">
<optgroup label="Breakfast">
<option value="Breakfast1">Breakfast1</option>
<option value="Breakfast2">Breakfast2</option>
<option value="Breakfast3">Breakfast3</option>
</optgroup>
<optgroup label="lunch">
<option value="lunch">lunch1</option>
<option value="lunch">lunch2</option>
<option value="lunch">lunch3</option>
</optgroup>
</select>
</label>
<!--message-->
<label for="e_message">
Message:
<textarea name="e_message"
id="e_message"
cols="30"
rows="5" >
</textarea>
</label>
<!--Range-->
<label for="e_range">
Range:
<input type="Range"
name="e_range"
id="e_range"
min="0"
max="3">
<input type="Range"
name="e_range"
id="e_range"
min="0"
max="3">
</label>
<!--fancy-->
<label for="e_fancy">
Fancy:
<input type="image"
src="https://primeinspire.com/wp-content/uploads/2023/05/send-fancy.png">
</label>
<button type="submit">Sign Up</button>
</form>