HTML Form Controls

 

Form Controls (Form Elements)

The form is made up of form controls that allow users to interact with the form. Each form control (e.g., <input>, <textarea>, <select>, <button>) has its own set of attributes.

1. <input> Element

The <input> tag is used for various types of form controls, such as text fields, checkboxes, radio buttons, etc.

Attribute

Description

Possible Values

Default

type

Specifies the type of input control to display.

text, password, checkbox, radio, submit, button, email, date, number, etc.

text (default)

name

Specifies the name of the input field, used to reference the data after form submission.

A string (e.g., username)

None

value

Specifies the initial value of the input field. For buttons, it specifies the button label.

A string (e.g., Submit, John)

None

placeholder

Provides a short hint that describes the expected value of the input field (shown inside the field).

A string (e.g., Enter your name)

None

required

Specifies that the input field must be filled out before submitting the form.

required (Boolean attribute)

None

disabled

Specifies that the input field is disabled and cannot be interacted with.

disabled (Boolean attribute)

None

readonly

Specifies that the input field is read-only, so users cannot change its value.

readonly (Boolean attribute)

None

maxlength

Specifies the maximum number of characters allowed in the input field.

An integer (e.g., 10)

None

min and max

Specifies the minimum and maximum values for numeric inputs.

Numeric values (e.g., 1, 100)

None

step

Specifies the interval between valid values for input fields of type number, range, etc.

A number (e.g., 5)

None

Example:

<input type="text" name="username" placeholder="Enter your username" required>

2. <textarea> Element

The <textarea> tag is used for multi-line text input.

Attribute

Description

Possible Values

Default

name

Specifies the name of the textarea.

A string (e.g., comments)

None

rows

Specifies the number of visible text lines in the textarea.

Integer value (e.g., 5)

None

cols

Specifies the visible width of the textarea (in characters).

Integer value (e.g., 50)

None

placeholder

Provides a hint for the user about the expected input.

A string (e.g., Enter comments)

None

required

Specifies that the textarea must be filled out before submitting the form.

required (Boolean attribute)

None

readonly

Specifies that the textarea is read-only and cannot be edited by the user.

readonly (Boolean attribute)

None

disabled

Specifies that the textarea is disabled and cannot be interacted with.

disabled (Boolean attribute)

None

Example:

<textarea name="message" rows="4" cols="50" placeholder="Write your message" required></textarea>

3. <select> Element

The <select> tag is used to create a dropdown menu.

Attribute

Description

Possible Values

Default

name

Specifies the name of the select element.

A string (e.g., country)

None

required

Specifies that the select field must be filled out before submitting the form.

required (Boolean attribute)

None

disabled

Specifies that the select element is disabled and cannot be interacted with.

disabled (Boolean attribute)

None

multiple

Specifies that multiple options can be selected.

multiple (Boolean attribute)

None

size

Specifies the number of visible options in the dropdown.

Integer value (e.g., 5)

None

Example:

<select name="country" required>

  <option value="USA">United States</option>

  <option value="Canada">Canada</option>

  <option value="Mexico">Mexico</option>

</select>

4. <button> Element

The <button> tag creates a clickable button.

Attribute

Description

Possible Values

Default

type

Specifies the type of button.

submit, reset, button

submit

name

Specifies the name of the button, which can be used to reference the data after form submission.

A string (e.g., submitBtn)

None

value

Specifies the value to be sent when the button is clicked.

A string (e.g., Submit)

None

disabled

Specifies that the button is disabled and cannot be clicked.

disabled (Boolean attribute)

None

Example:

<button type="submit" name="submit" value="Submit Form">Submit</button>

 

Comments

Post a Comment

Popular posts from this blog

Introduction to Computer

Image
Computers are electronic devices that are designed to process, store, and retrieve data. They are used for a wide variety of purposes, from personal computing to complex scientific simulations and industrial automation. A computer consists of various hardware components, including a central processing unit (CPU), memory, storage devices, input/output (I/O) devices such as keyboards, mice, and displays, and various other peripherals. Computers communicate with each other over networks, which are interconnected groups of computers that share resources and information. The internet is a global network that connects millions of computers around the world and enables communication and information sharing on an unprecedented scale. The field of computer science is concerned with the study of computers and computational systems, including their design, development, and application. It encompasses many subfields, including artificial intelligence, computer graphics, databases, programming lang...
Read more

History of Computer

Image
  History of Computer Topics  Definition of computer  Earliest computer  Computer History  Computer Generations Definition of Computer  Computer is a programmable machine.  Computer is a machine that manipulates data according to a list of instructions.  Computer is any device which aids humans in performing various kinds of computations or calculations.  Definition of Computer Three principles characteristic of computer:  It responds to a specific set of instructions in a well-defined manner.  It can execute a pre-recorded list of instructions.  It can quickly store and retrieve large amounts of data.  Earliest Computer  Originally calculations were computed by humans, whose job title was computers.  These human computers were typically engaged in the calculation of a mathematical expression.  The calculations of this period were specialized and expensive, requiring years of training in mathematics.  T...
Read more

Computer Generation

Image
 There are five generations of computer:  First generation– 1946 - 1958  Second generation– 1959 - 1964  Third generation– 1965 - 1970  Fourth generation– 1971 - today  Fifth generation– Today to future The First Generation   The first computers used vacuum tubes for circuitry and magnetic drums for memory, and were often enormous, taking up entire rooms.  They were very expensive to operate and in addition to using a great deal of electricity, generated a lot of heat, which was often the cause of malfunctions. The Second Generation   Transistors replaced vacuum tubes and ushered in the second generation of computers.  One transistor replaced the equivalent of 40 vacuum tubes.    Allowing computers to become smaller, faster, cheaper, more energy-efficient and more reliable.  Still generated a great deal of heat that can damage the computer. The Third Generation  The development of the integrated circuit was ...
Read more