The HTML <from> tag is creating an HTML form for user input. The HTML form is collecting user input. The user inputs are usually sent to a server for processing.
<form>
.
form elements
.
</form>The HTML <from> tag can contain the following form elements:
<button> – specifies a clickable button.
<datalist> – defines a list of pre-defined options for input controls.
<fieldset> – groups related elements in a form.
<input> – specifies an input control.
<label> – specifies a label for an <input> element.
<legend> – specifies a caption for a <fieldset> element.
<optgroup> – specifies a group of related options in a drop-down list.
<option> – specifies options in a drop-down list.
<output> – specifies the result of a calculation.
<textarea> – specifies a multiline text area.
<select> – specifies a drop-down list.
Example:
<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Details:</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="appointment">Appointment:</label>
<input type="date" id="appointment" name="appointment">
<input type="submit" value="Submit"><br><br>
</fieldset>
</form>
</body>
</html>Output:
Attributes:
accept-charset (value- character_set) -defines the character encodings for the form submission.
Syntax:
<form accept-charset="character_set"> Example:
<!DOCTYPE html>
<html>
<body>
<form action="" accept-charset="utf-8">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
Attribute values:
character-set – A space-separated list of one or more character encodings that are to be used for the form submission (UTF-8, ISO-8859-1).
action (value- URL) – defines where to send the form data when a form is submitted.
Syntax:
<form action="URL"> Example:
<!DOCTYPE html>
<html>
<body>
<form action="https://lenadesign.org/">
<label for="first-name">First name:</label>
<input type="text" id="first-name" name="first-name"><br><br>
<label for="last-name">Last name:</label>
<input type="text" id="last-name" name="last-name"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
Attribute values:
URL – an absolute URL – points to another website (like action=”http://www.example-example.com/example.html”), a relative URL – points to a file within a website (like action=”example-example.html”).
autocomplete (value- on/off) – defines whether a form should have autocompleted on or off.
Syntax:
<form autocomplete="on|off"> Example:
<!DOCTYPE html>
<html>
<body>
<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>
<form action="" method="get" autocomplete="on">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
</body>
</html>Output:
Fill in and submit the form, then reload the page, start to fill in the form again – and see how autocomplete works:
Attribute values:
on (default) – the browser will automatically complete values based on values that the user has entered before.
off – the user must enter a value into each field for every use.
enctype (value- application/x-www-form-urlencoded,multipart/form-data, text/plain) – defines how the form-data should be encoded when submitting it to the server.
Syntax:
<form enctype="value"> Note: The enctype attribute can be used only for method=”post”.
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/" method="post" enctype="multipart/form-data">
<label for="name">First name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
Attribute values:
application/x-www-form-urlencoded (default) – all characters are encoded before sent.
multipart/form-data – necessary value if the user will upload a file through the form.
text/plain – sends data without any encoding.
method (value- get/post) – defines the HTTP method to use when sending form-data.
Syntax:
<form method="get|post"> Example:
<!DOCTYPE html>
<html>
<body>
<form action="" method="get" target="_blank">
<label for="firstName">First name:</label>
<input type="text" id="firstName" name="firstM=Name"><br><br>
<label for="lasrName">Last name:</label>
<input type="text" id="lastName" name="lastName"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
Attribute values:
get(default) – appends the form-data to the URL in name/value pairs: URL?name=value&name=value.
post – sends the form data as an HTTP post-transaction.
name (value- text) – defines the name of a form.
Syntax:
<form name="text"> Example:
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
document.forms["my-form"].submit();
}
</script>
</head>
<body>
<h1>The form name attribute</h1>
<form name="my-form" action="" method="get">
<label for="name-first">First name:</label>
<input type="text" id="name-first" name="name-first"><br><br>
<label for="name-last">Last name:</label>
<input type="text" id="name-last" name="name-last"><br><br>
<input type="button" onclick="formSubmit()" value="Send">
</form>
</body>
</html>Output:
Attribute values:
text– defines the name of a form.
novalidate (value- novalidate) – defines that the form should not be validated when submitted.
Syntax:
<form novalidate> Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
</body>
</html>Output:
rel (value- external/ help/ license/ next/ nofollow/ noopener/ noreferrer/ opener/ prev/ search) – defines the relationship between a linked resource and the current document.
Syntax:
<form rel="value"> Attribute values:
external – defines that the referenced document is not a part of the current site.
help – links to a help document.
license – links to copyright information for the document.
next– the next document in a selection.
nofollow– links to an unendorsed document (like paid links).
noreferrer – defines that the browser should not send an HTTP referrer header if the user follows the hyperlink.
prev – the previous document in a selection.
search – links to a search tool for the document.
target (value- _blank/ _self/ _parent/ _top) – defines where to display the response that is received after submitting the form.
Syntax:
<form target="_blank|_self|_parent|_top"> Example:
<!DOCTYPE html>
<html>
<body>
<form action="https://lenadesign.org/" method="get" target="_blank">
<label for="first-name">First name:</label>
<input type="text" id="first-name" name="first-name"><br><br>
<label for="last-name">Last name:</label>
<input type="text" id="last-name" name="last-name"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>Output:
Attribute values:
_blank – the response is displayed in a new window or tab.
_self (default) – the response is displayed in the same frame.
_parent – the response is displayed in the parent frame.
_top – the response is displayed in the full body of the window.
Enjoy coding!
Read also: