From d8d36fd21124783f6a8b141369f64449f9cf49d0 Mon Sep 17 00:00:00 2001
From: Imran Imtiaz <emraan.imtiaz48@gmail.com>
Date: Mon, 30 Jun 2025 07:17:39 +0400
Subject: [PATCH] Update formhtml5.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Key improvements:
•	Accessibility and usability upgrades
•	Semantic HTML
•	Consistent formatting
•	Proper form field grouping
---
 2_HTML5/formhtml5.html | 316 ++++++++++++++++++-----------------------
 1 file changed, 138 insertions(+), 178 deletions(-)
diff --git a/2_HTML5/formhtml5.html b/2_HTML5/formhtml5.html
index 8c68903..fcba0db 100644
--- a/2_HTML5/formhtml5.html
+++ b/2_HTML5/formhtml5.html
@@ -1,179 +1,139 @@
-<!DOCTYPE html> 
-<!-- L�NEA OBLIGATORIA en los documentos de HTML5 para que los navegadores desplieguen la p�gina en modo est�ndar de acuerdo con las especificaciones de html y css -->
-<!-- Esto es un comentario "you don't say?" -->
-<!-- newforminputtypes.html -->
-<!-- Ejemplo HTML5 -->
-<!-- New HTML5 form input types and attributes. -->
-<html>
-   <head>
-      <meta charset="UTF-8"><!-- Codificaci�n de caract�res, UTF-8 es el m�s utilizado y ISO-8859-1 se utiliza para caract�res latinos -->	  
-	  <!-- Pueden incluirse instrucciones especiales de formato de documento CSS -->	  
-      <title>New HTML5 Input Types</title><!-- Elemento anidado que describe las p�ginas web, identificador cuando se agrega a marcadores o favoritos -->	  
-   </head>
-   <body>
-      <h1>New HTML5 Input Types</h1>
-      <form method = "post" autocomplete = "on" action="#">
-         <p><label>First Name:
-            <input type = "text" id = "firstName" 
-               placeholder = "First name" />(First name)
-            </label></p>
-         <p><label>Last Name:
-            <input type = "text" id = "lastName" 
-               placeholder = "Last name" />(Last name)
-            </label></p>
-         <p><label for = "txtList">Astrological Sign:
-            <input type = "text" id = "txtList" 
-               placeholder = "Select one" list = "sign" />
-            <datalist id = "sign">
-               <option value = "Aries">
-               <option value = "Taurus">
-               <option value = "Gemini">
-               <option value = "Cancer">
-               <option value = "Leo">
-               <option value = "Virgo">
-               <option value = "Libra">
-			   <option value = "Ophiuchus">
-               <option value = "Scorpio">
-               <option value = "Sagittarius">
-               <option value = "Capricorn">
-               <option value = "Aquarius">
-               <option value = "Pisces">   
-            </datalist>
-         </label></p>
-         <p>
-            <label>Color:
-               <input type = "color" autofocus /> 
-                  (Hexadecimal code such as #ADD8E6)
-            </label>
-         </p>
-         <p>
-            <label>Date:
-               <input type = "date" /> 
-                  (dd-mm-yyyy)
-            </label>
-         </p>
-
-         <p>
-            <label>Datetime-local:
-               <input type = "datetime-local" /> 
-                  (yyyy-mm-ddThh:mm, such as 2012-01-27T03:15)
-            </label>
-         </p>
-         <p>
-            <label>Email:
-               <input type = "email" placeholder = "name@domain.com" 
-                  required /> (name@domain.com)
-            </label>
-         </p>
-         <p>
-            <label>Month:
-               <input type = "month" /> (yyyy-mm)
-            </label>
-         </p>
-         <p>
-            <label>Number:
-               <input type = "number" 
-                  min = "0"
-                  max = "8"
-                  step = "2"
-                  value = "4" />
-            </label> (Enter a number between 0 and 7)
-         </p>
-         <p>
-            <label>Range:
-               0 <input type = "range" 
-                  min = "0"
-                  max = "20"
-                  value = "10" /> 20
-            </label>
-         </p>
-         <p>
-            <label>Search:
-               <input type = "search" placeholder = "search query" />
-            </label> (Enter your search query here.)
-         </p>
-         <p>
-            <label>Tel:
-               <input type = "tel" placeholder = "(###) ###-####" 
-                  pattern = "\(\d{3}\) +\d{3}-\d{4}" required /> 
-                  (###) ###-####
-            </label>
-         </p>
-         <p>
-            <label>Time:
-               <input type = "time" /> (hh:mm)
-            </label>
-         </p>
-         <p>
-            <label>URL:
-               <input type = "url" 
-                  placeholder = "http://www.domainname.com" /> 
-                  (http://www.domainname.com)
-            </label>
-         </p>
-		 <p>
-            <label>Password:
-               <input type = "password" 
-                  placeholder = "querty..ok not" /> 
-                  (querty | 123456 | teamo | batman)
-            </label>
-         </p>
-         <p>
-            <label>Week:
-               <input type = "week" /> 
-                  (yyyy-Wnn, such as 2012-W01)
-            </label>
-         </p>
-		 
-		 
-		 
-		 <p>
-            <label>Things you liked:</label><br>
-
-            <label>Site design
-               <input name = "thingsliked" type = "checkbox" 
-                  value = "Design"></label>
-            <label>Links
-               <input name = "thingsliked" type = "checkbox" 
-                  value = "Links"></label>
-            <label>Ease of use
-               <input name = "thingsliked" type = "checkbox" 
-                  value = "Ease"></label> 
-            <label>Images 
-               <input name = "thingsliked" type = "checkbox" 
-                  value = "Images"></label>
-            <label>Source code
-               <input name = "thingsliked" type = "checkbox" 
-                  value = "Code"></label>
-         </p>
-		          <!-- <input type = "radio"> creates a radio -->
-         <!-- button. The difference between radio buttons -->
-         <!-- and checkboxes is that only one radio button -->
-         <!-- in a group can be selected. -->
-         <p>
-            <label>How did you get to our site?:</label><br>
-
-            <label>Search engine
-               <input name = "howtosite" type = "radio"
-                  value = "search engine" checked></label>
-            <label>Links from another site
-               <input name = "howtosite" type = "radio" 
-                  value = "link"></label> 
-            <label>Web site
-               <input name = "howtosite" type = "radio" 
-                  value = "deitel.com"></label>
-            <label>Reference in a book
-               <input name = "howtosite" type = "radio" 
-                  value = "book"></label>
-            <label>Other
-               <input name = "howtosite" type = "radio" 
-                  value = "other"></label>
-         </p>
-         <p>
-            <input type = "submit" value = "Submit" />
-            <input type = "reset" value = "Clear" />
-         </p>   
-      </form>
-   </body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>New HTML5 Input Types</title>
+  <!-- Example HTML5 form demonstrating new input types and attributes -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <main>
+    <h1>New HTML5 Input Types</h1>
+    <form method="post" autocomplete="on" action="#">
+      <p>
+        <label for="firstName">First Name:
+          <input type="text" id="firstName" name="firstName" placeholder="First name" required>
+        </label>
+      </p>
+      <p>
+        <label for="lastName">Last Name:
+          <input type="text" id="lastName" name="lastName" placeholder="Last name" required>
+        </label>
+      </p>
+      <p>
+        <label for="txtList">Astrological Sign:
+          <input type="text" id="txtList" name="sign" placeholder="Select one" list="signs">
+        </label>
+        <datalist id="signs">
+          <option value="Aries"></option>
+          <option value="Taurus"></option>
+          <option value="Gemini"></option>
+          <option value="Cancer"></option>
+          <option value="Leo"></option>
+          <option value="Virgo"></option>
+          <option value="Libra"></option>
+          <option value="Ophiuchus"></option>
+          <option value="Scorpio"></option>
+          <option value="Sagittarius"></option>
+          <option value="Capricorn"></option>
+          <option value="Aquarius"></option>
+          <option value="Pisces"></option>
+        </datalist>
+      </p>
+      <p>
+        <label for="color">Color:
+          <input type="color" id="color" name="color" autofocus>
+          (Hexadecimal code such as #ADD8E6)
+        </label>
+      </p>
+      <p>
+        <label for="date">Date:
+          <input type="date" id="date" name="date">
+          (yyyy-mm-dd)
+        </label>
+      </p>
+      <p>
+        <label for="dtlocal">Datetime-local:
+          <input type="datetime-local" id="dtlocal" name="datetime-local">
+          (yyyy-mm-ddThh:mm)
+        </label>
+      </p>
+      <p>
+        <label for="email">Email:
+          <input type="email" id="email" name="email" placeholder="name@domain.com" required>
+        </label>
+      </p>
+      <p>
+        <label for="month">Month:
+          <input type="month" id="month" name="month">
+          (yyyy-mm)
+        </label>
+      </p>
+      <p>
+        <label for="number">Number:
+          <input type="number" id="number" name="number" min="0" max="8" step="2" value="4">
+          (Enter a number between 0 and 8)
+        </label>
+      </p>
+      <p>
+        <label for="range">Range:
+          0 <input type="range" id="range" name="range" min="0" max="20" value="10"> 20
+        </label>
+      </p>
+      <p>
+        <label for="search">Search:
+          <input type="search" id="search" name="search" placeholder="search query">
+        </label>
+      </p>
+      <p>
+        <label for="tel">Tel:
+          <input type="tel" id="tel" name="tel" placeholder="(###) ###-####"
+            pattern="\(\d{3}\) \d{3}-\d{4}" required>
+        </label>
+      </p>
+      <p>
+        <label for="time">Time:
+          <input type="time" id="time" name="time">
+          (hh:mm)
+        </label>
+      </p>
+      <p>
+        <label for="url">URL:
+          <input type="url" id="url" name="url" placeholder="http://www.domainname.com">
+        </label>
+      </p>
+      <p>
+        <label for="password">Password:
+          <input type="password" id="password" name="password" placeholder="Your password">
+        </label>
+      </p>
+      <p>
+        <label for="week">Week:
+          <input type="week" id="week" name="week">
+          (yyyy-Wnn)
+        </label>
+      </p>
+      <fieldset>
+        <legend>Things you liked:</legend>
+        <label><input name="thingsliked" type="checkbox" value="Design">Site design</label>
+        <label><input name="thingsliked" type="checkbox" value="Links">Links</label>
+        <label><input name="thingsliked" type="checkbox" value="Ease">Ease of use</label>
+        <label><input name="thingsliked" type="checkbox" value="Images">Images</label>
+        <label><input name="thingsliked" type="checkbox" value="Code">Source code</label>
+      </fieldset>
+      <fieldset>
+        <legend>How did you get to our site?</legend>
+        <label><input name="howtosite" type="radio" value="search engine" checked>Search engine</label>
+        <label><input name="howtosite" type="radio" value="link">Links from another site</label>
+        <label><input name="howtosite" type="radio" value="deitel.com">Web site</label>
+        <label><input name="howtosite" type="radio" value="book">Reference in a book</label>
+        <label><input name="howtosite" type="radio" value="other">Other</label>
+      </fieldset>
+      <p>
+        <input type="submit" value="Submit">
+        <input type="reset" value="Clear">
+      </p>
+    </form>
+  </main>
+</body>
 </html>
-
