Skip to content

Update formhtml5.html #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Imran-imtiaz48 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update formhtml5.html #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
316 changes: 138 additions & 178 deletions 2_HTML5/formhtml5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>