Scribd
Upload
10 views

HTML 02 Forms

The document describes the basic HTML tags used to create forms. It lists common form tags like <form>, <input>, <textarea>, <button>, <select>, and <option>. It provides the attributes for each tag and examples of how they can be used to collect user input like text, dates, numbers, checkbox values, and dropdown selections. The sample code at the bottom demonstrates how these tags can be combined to create a basic HTML registration form.

Uploaded by

Ahmad Marwad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

HTML 02 Forms

The document describes the basic HTML tags used to create forms. It lists common form tags like <form>, <input>, <textarea>, <button>, <select>, and <option>. It provides the attributes for each tag and examples of how they can be used to collect user input like text, dates, numbers, checkbox values, and dropdown selections. The sample code at the bottom demonstrates how these tags can be combined to create a basic HTML registration form.

Uploaded by

Ahmad Marwad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

BASIC HTML 5 FORM

HTML Tags
TAG ATTRIBUTES REMARKS

FORM

form action=”?|<URL>” Backend Processor;


method=”get|post” GET = Visible in the
onsubmit=”return false;” URL; POST =
id=”” Invisible payload;
class=”” onsubmit = JS
function to validate
the form

TEXT & BUTTON

input type=”text | password | email | Use the name


search | color | property to group
date | time | month | radio buttons
radio | checkbox |
button | submit | reset”
placeholder=”Hint”
value=”2023-02-12”
size=”123”
required
name=””
id=””

<input type="radio" name="gender"> Male<br>


<input type="radio" name="gender"> Femalex

<input type="button" value="Click Me">

textarea rows=”N”
cols=”N”

button type=”submit|reset|button” Label goes between


the start and end
tags

COMBO BOX

select size=”N” Number of visible


options

multiple Multiple choice

optgroup label=”<Title>” Groups related


options

option value=”<VAL>”

<option value=”RC”>Roman
Catholic</option>

MISCELLANEOUS

label for=”elementID” The element that


this label is for
should have an
id=”elementID”
attribute

NOTES

● Don’t forget the id and/or name attributes


● Buttons
(https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html)
Sample Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ICSA &bull; &lt;WEB.DESIGN /&gt; | Basic HTML 5 Form</title>
</head>
<body>
<h1>Basic HTML 5 Form</h1>

<form>
Name: <input type="text" placeholder="Last Name, First Name" />
<br />

<label>Date of Birth: <input type="date" /></label>


<br />

<label for="civilID">Civil ID No:</label>


<input id="civilID" type="number" placeholder="############" />
<br />

E-mail Address:
<input type="email" />
<br />

<label>Address:</label>
<textarea class="addr" rows="4"></textarea>
<br />

Gender:
<select>
<option>Male</option>
<option>Female</option>
</select>
<br />

Interests:
<select size="10">
<optgroup label="Entertainment">
<option>Showbiz</option>
<option>Hollywood</option>
<option>Bollywood</option>
</optgroup>
<optgroup label="Technology">
<option>Hardware</option>
<option>Software</option>
<option>Gaming</option>
</optgroup>
</select>
<br />

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="menu">Menu</button>
</form>
</body>
</html>

You might also like