An input element of a form control that permits to define a scalar value (single value)
The type attribute defined:
See the list below
If an input element has an id, it can be selected directly
<form>
<input id="user" type="text" value="Nico" />
<input id="age" type="number" value="10" />
</form>
let form = document.querySelector("form");
console.log("User: "+form.user.value);
console.log("Age: "+form.age.value);
The name attribute:
<form>
<input name="user" type="text" value="Nico" />
<input name="age" type="number" value="10" />
</form>
let form = document.querySelector("form");
console.log("User: "+form.elements.user.value);
console.log("Age: "+form.elements['age'].value);
The form attribute is the id of a element element in the same document.
<input id="user" type="text" value="foo" form="form_id"/>
<form id="form_id">
</form>
let form = document.querySelector("form");
console.log("User: "+form.user.value);
The value attribute:
Default to:
When the value changes, it fires an input event.
handleSubmit = () => {
let form = document.querySelector("form");
alert("Field value: "+form.elements.field.value);
};
<form onSubmit="handleSubmit()">
<input name="field" type="text" value="Change Me and Submit"/>
<input type="submit"/>
</form>
The list attributes refers to a datalist that defines a set of permitted values.
Unfortunately, the list behavior is not specified and it filters by default leaving out the other values once a value was selected.
The autocomplete attribute describes the semantic of the value in order to auto-fill the form.
The multiple attribute is a boolean attribute that indicates whether the user is to be allowed to specify more than one value.
See:
If the input controls are not valid (successful), they are not added to the data of the form when submitted.
text represents a couple of words or a line of text. For multiple lines, you would use the textarea HTML element
Example:
<!-- Label is coupled to input via the for attributes that define the input id -->
<label for="textId">Choose a username: </label>
<input id="textId" name="textName" type="text" placeholder="text input" />
Attribute:
input/search is a search box Identical to text inputs, but may be styled differently by the user agent. More … see How to use a HTML Input Search Element to create a Search box?
See the page: How to get and validate an email address with an HTML form?
The input type password 1) represents a password.
Example:
<input type="password" placeholder="password input" />
en-US/docs/Web/HTML/Element/input/number
<input
type="number"
placeholder="0"
step="0.01"/>
en-US/docs/Web/HTML/Element/input/range
<input type="range" placeholder="range input" />
See How to add a color in a HTML input form?
See How to create a date field in an HTML form? (at the month, day, hour and minute level)
The file input permits to choose files from the local file system.
Example: To pick one file:
<input type="file" webkitdirectory />
For more example, see the dedicated page: How to work with an Input File in an HTML form?
en-US/docs/Web/HTML/Element/input/tel. One of the main advantages of is that it causes mobile browsers to display a special keyboard for entering phone numbers.
<input type="tel" placeholder="+31600000" />
How to create and use a HTML checkbox ?
input/image is a graphical submit button.
input/submit is a submit element that will submit the form.
In html, there is two kind of button:
When the value changes, it fires an input event.