Form.html

<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="example@gmail.com">
</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>