Categories
HTML Web development

HTML form tag

HTML form tag

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:

Details:







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&#8221;), 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!