List of all form objects in HTML

List of objects recognized by all browsers, with the source code, and how to use them. 

<form name="myform" id="myform" action="page.html" onSubmit="return fun()">

... objects...

</form>

The name or id attribute can access by script to its content. It is best to use both attributes with the same
identifier, for the sake of compatibility.

The action attribute indicates the page to which send the form data. If this attribute is empty, the page that
contains the form that will be charged the data as parameters.

The onSubmit attribute associates a test function on the form. If the function return false, the form data are not
sent, we stay on the same page.

Top of Form
Object Appearance Code

<input type="button" value="Send"

onclick="myfunction()">
Button
If it is a simple button and not a submit button, you need to
associate JavaScript code with the onclick event to execute
something. 
You can customize it by associating a CSS class.
The corresponding code:

<input type="text" name="mytext" value="default

text">

As shown, the field may be pre-filled with the value attribute.

Text field
Other attributes are:

 type = "password" for a field to the hidden content.

 size = width of the text field.

 maxlength = maximum number of characters.

 <textarea name="textarea">content</textarea>
Text area
Text field on several lines. The difference with the previous
object is that the initial content is placed between the starting
and ending tags, not in an attribute.

<input type="password" name="pass"

Password
value="12345">

<input type="hidden" value="code">

Hidden
 
field
Allows to add data to values sent by the form, that are defined
by a script rather than entered by the user.

<input type="checkbox" name="cb1" value="true"

checked>
Checkbox
 The checked attribute allows you to check the box
initially.

An article is dedicated to the study of the use of check boxes.

Radio
  <input type="radio" name="radiox" value="radio1">
button

Radio
group Choice 1   
<label>Choix 1
Choice 2 
<input type="radio" name="myradio"
value="radio1">

</label><br>

<label>Choix 2

<input type="radio" name="myradio"

value="radio2">

</label>

A radio button works as a checkbox. But a group of radio

 buttons allows an alternative: checking one unchecks others.

 Yes   No

<input type="radio" name="id1" value="true"

checked> Yes

<input type="radio" name="id1" value="false"> No

So that the buttons are alternative, we must give the same

name or id for all.

<select name="select">

<option>cherry</option>

<option>orange</option>

<option>apple</option>

</select>
                               
Menu
The select tag and option inner tags allow to build a menu that
can take the form of a scrolling list or a static list.

 The size attribute specifies the number of rows

displayed. If this number is less than the number of
options, a vertical scroll bar appears.
 The multiple attribute allows simultaneous multiple
selection.

 The selected option attribute indicates which element

is initially selected.

<select name="select2" size="3">

<option>cherry</option>
                               
List <option>orange</option>

<option>apple</option>

</select>
 <input type="file" name="file">

HTML has a file selection function with the file type "file"
File which combines a text field and a button.

The local filename is assigned to the value attribute of the

object. 
The content of the local file is added to form data and sent
with them.

<input type="image" name="image" src="xulfr.gif">

Image field
 The src attribute indicates the URL of the image.

The difference with the img tag is that it is taken into account

in the form data passed to another page.

<input type="submit" value="Submit">

It send the form data to a script or another page.

 The value attribute defines the label to display on the

button.

Submit When you press this button, the file defined by

button the action attribute of the form is loaded in place of the current
page and the form data are given as parameters.

If the action field is empty, the current page is reloaded with

for parameters the form data.

It is possible to have multiple submit buttons and dynamically

modify the content of action in JavaScript to load different
pages. In this case, we associate an onclick event to the submit
buttons.