Introduction

HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document. Structure a document into logical sections, and embed content such as images and videos into a page. This something brief about HTML.

To design a web page that looks like a form, HTML uses form elements. This article goes with the form element. Ok let's learn,,.!

What is mean to be `<form>`?

The <form> element represents a whole document section which contain interactive controls for submitting information.

Here information are entered by users.
This <form> element contain several attributes and inner input elements which may help in design a beautiful web page.
A possible thing in these <form> elements are like we can validate the elements inside the form.

Some Global and Submission Attributes of `<form>`..!

Global attributes

accept-charset:- Space separated character encodings the server accepts. The browser uses them in the order in which they are listed.
autocapitalize:- A nonstandard attribute used by iOS safari browser that controls the textual <form> elements should be automatically capitalized.
autocomplete:- It fill up the textual <form> elements by default.
name:- This is name of the <form>. name value must not be the empty string, and must be unique among the <form> elements in the <form> collection.
rel:- This rel creates a hyperlink or annotation depending on the value.

Submission attributes

action:- A majorly used submission attribute. The URL that prosses the form submission. The value can be overridden by a formaction attribute on some element.
method:- The HTTP method to submit the form with. Some of the only allowed methods are:
- post: The post method is used to form data sent as the request body.
- get: The get method is used to append the form data to the action URL with a ? separator.
- dialog: When the form is inside a dialog, closes the dialog and throws a submit event on submission without submitting data or clearing the form. The action attribute is ignored when method='dialog' is set.
enctype:- If the value of the method attribute is post, enctype is the media type of the form submission.
target:- Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context. Some keywords:
- _self:- Load into the same browsing context as the current one.
- _blank:- Load into a new unnamed browsing context.
- _parent:- Load into the parent browsing context of the current one.
- _to:- Load into the top-level browsing context.
novalidate:- This Boolean attribute indicates that the form shouldn't be validated when submitted.

Example for form attributes..!

<!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>Form attribute(post)</title>
</head>
<body>
    <h1>Simple example for Form post</h1>
    <form method="post">
        <label>Name:
          <input name="name" autocomplete="name" />
        </label><br>
        <button>Save</button>
    </form><br>
    <p>
       <em>(In above form which will send a POST request to the current URL.)</em> 
    </p>
</body>
</html>

Output:-

What is mean to be `<input>`?

The <input> element of html is used to create a interactive controls for web-based forms in order to accept data from the user, a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex HTML due to the sheer number of combinations of input types and attributes.

Some types of `<input>`..!

button:- A button with no default behavior displaying the value of the value attribute, empty by default.
checkbox:- A check box allowing single values to be selected/deselected.
color:- A control specifying a color, opening a color picker when active in supporting browsers.
date:- A control for entering a date. Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.
datetime-local:- A control for entering a date and time with no time zone. Opens a date picker or numeric wheels for date and time components when active in supporting browsers.
email:- A field for editing an email address. Looks lie a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
file:- A control that lets the user select a file. use the accept attribute to define the types of files that the control can select.
hidden:- A control that is not displayed but whose value is submitted to the server.
image:- A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays is the image src is missing.
month:- A control for entering a month and year with no time zone.
number:- A control for entering a number. Displays a spinner and adds default validation. Displays as numeric keypad in some devices with dynamic keypads.
password:- A single line text field whose value is obscured.
radio:- A radio button, allowing a single value to be selected out of multiple choices with same name value.
range:- A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value.
reset:- A button that rates the contents of the form to default values.
search:- A single line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.
submit:- A button submits the form.
tel:- A control to enter a telephone number.
text:- A default one. Single line text field.
time:- A control for entering a time value with no time zone.
url:- A field for entering a URL. Some main and important validations and parameters are by default applied to this element.
week:- A control for entering a date consisting of a week year number and a week number with no time zone.

Some attributes of ..!

accept:- Only accept the file type uploaded in controls
alt:- Required attribute foe image input type.
checked:- Whether the command or control is checked for checkbox and radio types.
disabled:- It controls the disable value for all types.
formaction:- Url use for form submission.
formtarget:- Browsing context for form submission.
height :- Maintain the vertical dimension for image.
max: Maintain the maximum value for date month week time datetime-local number range
maxlength:- Maximum length of value.
min:- Maintain the minimum value.
minlegnth:- Minimum length of value.
name:- Name of the form control. Submitted with the form as part of a name/value pair.
placeholder:- Text that appears in the form control when it has no value set.
required:- A value is required or must be check for the form to be submittable.
readonly:- The value is not editable.

16 src:- Source for Image.

17 width:- Maintain horizontal dimension for image.

Example of Input elements

<!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>Form input</title>
</head>
<body>
    <form action="" style="padding: 15px;">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="birthday">Birthday:</label><br>
        <input type="date" id="birthday" name="birthday"><br>
        <label for="tel">Telephone:</label><br>
        <input type="tel" name="tel" id=""><br>
        <label for="email">Email:</label><br>
        <input type="email" id="name" name="email"><br>
        <label for="pwd">Password:</label><br>
        <input type="password" id="pwd" name="pwd"><br>
        <h4>Favorite language</h4>
        <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>
        <h4>Communication language</h4>
        <input type="checkbox" name="lang1">
        <label for="lang1">English</label>
        <input type="checkbox" name="lang2">
        <label for="lang2">Hindi</label>
        <input type="checkbox" name="lang3">
        <label for="lang3">Kannada</label><br>
        <h4>Select your favorite color:</h4>
        <input type="color"><br><br>
        <input type="image" src="" alt="Here is one image actually placed" height="48"><br>
        <label for="myfile">Upload a file:</label>
        <input type="file" id="myfile" name="myfile"><br><br><br>
        <input type="submit" value="Submit">
        <input type="reset"><br><br>
        <input type="button" onclick="alert('Hello folks!')" value="Can't you see me!">
    </form>
</body>
</html>

Output:-

I think this much information is helpful to you all

Thank you for reading (learn to start)

Words on HTML Input Element</>

The following is a short and concise list of HTML input elements that may be useful while coding

Table of contents

Introduction

What is mean to be `<form>`?

Some Global and Submission Attributes of `<form>`..!

Global attributes

Submission attributes

Example for form attributes..!

What is mean to be `<input>`?

Some types of `<input>`..!

Some attributes of ..!

Example of Input elements

Words on HTML Input Element</>

The following is a short and concise list of HTML input elements that may be useful while coding

Table of contents

Introduction

What is mean to be <form>?

Some Global and Submission Attributes of <form>..!

Global attributes

Submission attributes

Example for form attributes..!

What is mean to be <input>?

Some types of <input>..!

Some attributes of ..!

Example of Input elements

Did you find this article valuable?

What is mean to be `<form>`?

Some Global and Submission Attributes of `<form>`..!

What is mean to be `<input>`?

Some types of `<input>`..!