Creating Forms in HTML

Creating and working with forms in HTML

All controls, such as text fields, buttons, checkboxes, drop-down lists, etc., are usually placed inside a form :

<form action="file.php" method="post" id="form">
  <!-- form contents -->
</form>

• form Controls, of which there can be as many as you like, should be located just inside the element.

Form attributes:

• The attribute action specifies a server-side script file responsible for the primary processing of data sent from the form. Typically, the code for this file is written in a server-side programming language, such as PHP or Perl.
• The attribute enctype indicates the type of information transmitted to the server; if it is just text data, then text/plainIf files are sent with the form, then multipart/form-data.
• This attribute method specifies and defines the form of data transfer. We won’t go into detail about this, but it’s worth noting that for a more reliable transfer, the method should be specified.post.

HTML form elements

<label for="login">Login</label>
<input 
  type="text" 
  id="login" 
  name="login" 
  value="" 
  placeholder="Enter login" 
  maxlength="25" 
  autocomplete="username" 
  required 
/>

Result:

Attributes:

• • • The value of the attribute type — text — indicates that this is a text field.
    • size — the size of the text field in characters
    • maxlength — the maximum number of characters that fit in the field
    • value — the original text in the text field
    • name — the name of the element, required for processing data in the handler file

<input type="password" name="pass" size="20" placeholder="Password" maxlength="

Result:

Instead of text, a mask is displayed in the field – asterisks or circles

Result:

The button submit collects all the data from the form entered by the user and sends it to the address specified in action the form attribute.

Result: The button returns the state of all controls to the initial state (clears the form)

<fieldset>
  <legend>Select Technologies</legend>

  <label for="tech-asp">
    <input type="checkbox" id="tech-asp" name="tech" value="asp">
    ASP
  </label>

  <label for="tech-js">
    <input type="checkbox" id="tech-js" name="tech" value="js" checked>
    JavaScript
  </label>

  <label for="tech-php">
    <input type="checkbox" id="tech-php" name="tech" value="php">
    PHP
  </label>

  <label for="tech-html">
    <input type="checkbox" id="tech-html" name="tech" value="html" checked>
    HTML
  </label>
</fieldset>

Result:

ASP
JavaScript
PHP
HTML

In HTML, a checkbox is used to organize multiple choices, i.e., when it is necessary and possible to select several answer options.

Attributes :

• • The attribute checked immediately sets the element to be checked.
  • Attributes nameare valuenecessary for the programmer to process the element. Therefore, they can be omitted.

<label><input type="radio" name="book" value="asp"> ASP</label><br>
<label><input type="radio" name="book" value="js"> JavaScript</label><br>
<label><input type="radio" name="book" value="php"> PHP</label><br>
<label><input type="radio" name="book" value="html" checked> HTML</label>

<fieldset style="border: none; display: flex; flex-direction: column; gap: 8px;">
  <legend>Select a Book:</legend>
  <label><input type="radio" name="book" value="asp"> ASP</label>
  <label><input type="radio" name="book" value="js"> JavaScript</label>
  <label><input type="radio" name="book" value="php"> PHP</label>
  <label><input type="radio" name="book" value="html" checked> HTML</label>
</fieldset>

Result:

ASP
Javascript
PHP
HTML

A radio button in HTML is used to select a single option from several options.

Attributes:

• The attribute checked immediately sets the element to be checked.
• The attribute  valueis required for the programmer to process the element. Therefore, it can be omitted.

HTML drop-down list

Let’s look at an example of adding a drop-down list:

<select name="book" size="1">
    <option value="asp">ASP</option>
    <option value="js">JavaScript</option>
    <option value="php">PHP</option>
    <option value="html" selected="selected">HTML</option>
</select>

Result:

• • The drop-down list consists of the main tag – select– which has a closing pair, and each list item is a tag optioninside which the text of the item is displayed.

Attributes:

• An attribute sizeA value of “1” indicates that the list, in collapsed form, displays one item, with the rest opening when you click the menu arrow.
• The attribute selectedof an item ( option) indicates that this particular item will be initially visible, and the other items will be “collapsed.”
• The attribute valueis required for the programmer to process the element. Therefore, it can be omitted.

For large and complex lists, it is possible to add subheadings – a tag optgroupwith an attribute label(caption):

<select name="book" size="1"> 
	<optgroup label="English"> 
		<option value="asp">ASP</option> 
		<option value="js">JavaScript</option> 
		<option value="php">PHP</option> 
		<option value="html" selected="selected">HTML</option> 
	</optgroup> 
	<optgroup label="Russian"> 
		<option value="asp_rus">ASP in Russian</option> 
		<option value="js_rus">JavaScript in Russian</option> 
	</optgroup> 
</select>

To allow multiple selections, you need to add the attribute multiple. However, in this case, the attribute sizeshould also be set to a value greater than 1:

<label for="book-select">Select Books:</label>
<select id="book-select" name="book" size="4" multiple>
  <option value="book1">Book 1</option>
  <option value="book2">Book 2</option>
  <option value="book3">Book 3</option>
  <option value="book4">Book 4</option>
</select>

Text area in HTML

To enter a large piece of text, use the text area element:

<textarea name="description" rows="10" placeholder="Enter description..."></texta

Result:

Attributes:

• The width of an element depends on the attributecols, which specifies how many characters fit horizontally.
• The attribute rowsdefines the number of lines in the element.
• The attribute nameis required for the programmer to process the element. Therefore, it can be omitted.

Other elements

<button type="button">Do something</button>

<input type="image" src="1.png" alt="Submit" width="32" height="32" />

Result:

There is a special control for attaching a file to a form:

Result:

When using it, the form encoding value (attribute enctype on the tag form) must be set tomultipart/form-data

A hidden field is an important programming element. It is not displayed in the browser window, but is intended to pass additional data through the form to the processing file.

1. Modern HTML5 (Self-Closing Optional): Standard HTML5 does not require the closing slash:

<input type="hidden" name="uid" value="15362">

2. Modern Syntax with Data Attributes:s If you are passing this to JavaScript rather than submitting a traditional HTML form, data attributes are cleaner and more semantic:

<div id="user" data-uid="15362"></div>

Additional elements and attributes

Label for:

• • For radio and checkbox controls, it’s convenient to use additional elements that, firstly, bind the text to the radio or checkbox element itself, and secondly, add a border when clicked:

<input type=”checkbox” id=”book1″><label for=”book1″>ASP</label>
In this example, a label (tag label) is created for the element checkbox. The binding is accomplished via the attribute id, the value of which is specified in for the label attribute.

Result:

• • The attribute disabledallows you to lock an element, making it inaccessible for modification by the user:

<form>
  <div class="form-group">
    <input type="text" name="login" size="20" value="Login" maxlength="25" disabled>
  </div>
  
  <div class="form-group">
    <label>
      <input type="checkbox" name="asp" value="yes"> ASP
    </label>
  </div>

  <div class="form-group">
    <label>
      <input type="checkbox" name="js" value="yes" checked disabled> JavaScript
    </label>
  </div>
</form>

Result:

• • This attribute readonlymakes text documents read-only (text cannot be entered or modified):

<input type="text" name="login" value="Login" maxlength="25" readonly>

Result:

• • To visually design a group of objects, you can use the element fieldset:

<fieldset>
  <legend>Books</legend>
  <label>
    <input type="checkbox" name="books" value="html"> HTML
  </label><br>
  <label>
    <input type="checkbox" name="books" value="asp"> ASP
  </label><br>
  <label>
    <input type="checkbox" name="books" value="js"> JavaScript
  </label>
</fieldset>

Result:

• • You can set the order of movement through the elements using the key TAB:

<!-- Native focusable elements (buttons, inputs, links) -->
<button tabindex="1">First Focused</button>

<!-- Custom/Non-interactive elements (divs, spans) -->
<div tabindex="1" role="button" aria-label="Custom Button">First Focused Div</div>

The element will be the first in the transition queue.