Words on HTML Input Element</>

Words on HTML Input Element</>

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

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

  1. accept-charset:- Space separated character encodings the server accepts. The browser uses them in the order in which they are listed.

  2. autocapitalize:- A nonstandard attribute used by iOS safari browser that controls the textual <form> elements should be automatically capitalized.

  3. autocomplete:- It fill up the textual <form> elements by default.

  4. 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.

  5. rel:- This rel creates a hyperlink or annotation depending on the value.

Submission attributes

  1. 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.

  2. 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.

  3. enctype:- If the value of the method attribute is post, enctype is the media type of the form submission.

  4. 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.
  5. 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:-

inputForm.jpg

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>..!

  1. button:- A button with no default behavior displaying the value of the value attribute, empty by default.

  2. checkbox:- A check box allowing single values to be selected/deselected.

  3. color:- A control specifying a color, opening a color picker when active in supporting browsers.

  4. date:- A control for entering a date. Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

  5. 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.

  6. 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.

  7. 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.

  8. hidden:- A control that is not displayed but whose value is submitted to the server.

  9. image:- A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays is the image src is missing.

  10. month:- A control for entering a month and year with no time zone.

  11. number:- A control for entering a number. Displays a spinner and adds default validation. Displays as numeric keypad in some devices with dynamic keypads.

  12. password:- A single line text field whose value is obscured.

  13. radio:- A radio button, allowing a single value to be selected out of multiple choices with same name value.

  14. range:- A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value.

  15. reset:- A button that rates the contents of the form to default values.

  16. 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.

  17. submit:- A button submits the form.

  18. tel:- A control to enter a telephone number.

  19. text:- A default one. Single line text field.

  20. time:- A control for entering a time value with no time zone.

  21. url:- A field for entering a URL. Some main and important validations and parameters are by default applied to this element.

  22. week:- A control for entering a date consisting of a week year number and a week number with no time zone.

Some attributes of ..!

  1. accept:- Only accept the file type uploaded in controls

  2. alt:- Required attribute foe image input type.

  3. checked:- Whether the command or control is checked for checkbox and radio types.

  4. disabled:- It controls the disable value for all types.

  5. formaction:- Url use for form submission.

  6. formtarget:- Browsing context for form submission.

  7. height :- Maintain the vertical dimension for image.

  8. max: Maintain the maximum value for date month week time datetime-local number range

  9. maxlength:- Maximum length of value.

  10. min:- Maintain the minimum value.

  11. minlegnth:- Minimum length of value.

  12. name:- Name of the form control. Submitted with the form as part of a name/value pair.

  13. placeholder:- Text that appears in the form control when it has no value set.

  14. required:- A value is required or must be check for the form to be submittable.

  15. 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:-

inputForm2.jpg

I think this much information is helpful to you all

Thank you for reading (learn to start)

Did you find this article valuable?

Support Prajwal V Naik by becoming a sponsor. Any amount is appreciated!