Form–which is represent by <form>tag
example
<form method=”post” action=”mailto:karth9840@gmail.com”> many sub tags are there and this tag help to send the submitted forms to the mentioned mail id
The HTML <form> Elements
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
examples
<select>
<form action=”/action_page.php”>
<label for=”cars”>Choose a car:</label>
<select id=”cars” name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
if we need size to display
<select id=”cars” name=”cars” size=”3″>
to select more than one value
<select id=”cars” name=”cars” size=”4″ multiple></select>
<button>
<h2>The button Element</h2>
<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>
(alert used to show a pop up message)
</fieldset>-element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<form action=”/action_page.php”>
<fieldset>
<legend>Personalia:</legend>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”><br><br>
<label for=”lname”>Last name:</label>
<input type=”text” id=”lname” name=”lname”><br><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”><br><br>
<label for=”birthday”>Birthday:</label>
<input type=”date” id=”birthday” name=”birthday”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
</datalist>-element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
<form action=”/action_page.php”>
<input list=”browsers” name=”browser”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
<input type=”submit”>
</form>
value
<form action=”/action_page.php”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0
<input type=”range” id=”a” name=”a” value=”50″>
100 +
<input type=”number” id=”b” name=”b” value=”50″>
=
<output name=”x” for=”a b”></output>
<br><br>
<input type=”submit”>
</form>
Input -which is represent by <input>.which usually used to collect the info from the users
some tags are
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
for radio tags
<form action=”/trail.html”>
<input type=”radio” id=”html” name=”fav_language” value=”HTML”>
<label for=”html”>HTML</label><br>
<input type=”radio” id=”css” name=”fav_language” value=”CSS”>
<label for=”css”>CSS</label><br>
<input type=”radio” id=”javascript” name=”fav_language” value=”JavaScript”>
<label for=”javascript”>JavaScript</label><br><br>
<input type=”submit” value=”Submit”>
</form>
for check box
<form>
<input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike”>
<label for=”vehicle1″> I have a bike</label><br>
<input type=”checkbox” id=”vehicle2″ name=”vehicle2″ value=”Car”>
<label for=”vehicle2″> I have a car</label><br>
<input type=”checkbox” id=”vehicle3″ name=”vehicle3″ value=”Boat”>
<label for=”vehicle3″> I have a boat</label>
</form>
for reset
<form action=”/action_page.php”>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Submit”>
<input type=”reset”>
</form>
for submit
<form action=”/action_page.php”>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Submit”>
</form>
for button
<input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”> (which provides pop feature with “onclick”=alert)
Input Restrictions
checked-Specifies that an input field should be pre-selected when the page loads (for type=”checkbox” or type=”radio”)
disabled–Specifies that an input field should be disabled
max–Specifies the maximum value for an input field
maxlength–Specifies the maximum number of character for an input field
min–Specifies the minimum value for an input field
pattern-Specifies a regular expression to check the input value against
readonly-Specifies that an input field is read only (cannot be changed)
required-Specifies that an input field is required (must be filled out)
size-Specifies the width (in characters) of an input field
step-Specifies the legal number intervals for an input field
value-Specifies the default value for an input field
Examples
for min and max with step and value
<form>
<label for=”quantity”>Quantity:</label>
<input type=”number” id=”quantity” name=”quantity” min=”0″ max=”100″ step=”10″ value=”30″>
</form>
for range with min and max
<form>
<label for=”vol”>Volume (between 0 and 50):</label>
<input type=”range” id=”vol” name=”vol” min=”0″ max=”50″>
</form>
for phone number with placeholder,pattern and required
<form>
<label for=”phone”>Enter your phone number:</label>
<input type=”tel” id=”phone” name=”phone” placeholder=”123-45-678″ pattern=”[0-9]{3}-[0-9]{2}-[0-9]{3}” required>
</form>
Login
