Forms

Exercise

  1. In the "index.html" file, write the following code:
<!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>My First Web Page</title>
</head>
<body>

</body>
</html>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. Add the following between the opening and closing tags of the body:
<h1>Entry Form</h1>
<form action="" method="">

</form>
  1. Save.
  2. Create a user field by adding the following between the opening and closing tags of the form:
<!-- Username -->
<label for="userName">User</label>
<input type="text" name="userName" id="userName" placeholder="username">
<!-- Line Breaks -->
<br>
<br>
  1. Save.
  2. Create a password field by adding the following after the line breaks that follow the username field:
<!-- Password -->
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="password">
<!-- Line Breaks -->
<br>
<br>
  1. Save.
  2. Create an email field by adding the following after the line breaks that follow the password field:
<!-- Email -->
<label for="email">Email Address</label>
<input type="email" name="email" id="email">
<!-- Line Breaks -->
<br>
<br>
  1. Save.
  2. Create a radio button selection by adding the following after the line breaks that follow the email field: 
<!-- Preferred Language -->
<p>Please select your preferred language:</p>
<input type="radio" name="language" id="" value="english" checked>English
<input type="radio" name="language" id="" value="french">French
<input type="radio" name="language" id="" value="german">German
<!-- Line Breaks -->
<br>
<br>
  1. Save.
  2. Create a checkbox selection by adding the following after the line breaks that follow the radio buttons: 
<!-- Coding Languages that you want to learn -->
<p>Please select the coding languages that you want to learn:</p>
<input type="checkbox" name="coding" id="" value="swift">Swift
<input type="checkbox" name="coding" id="" value="javascript" checked>JavaScript
<input type="checkbox" name="coding" id="" value="python">Python
<!-- Line Breaks -->
<br>
<br>
  1. Save.
  2. Create a dropdown selection by adding the following after the line breaks that follow the checkboxes:
<!-- Select input for  -->
<p>Please select the country that want to visit next:</p>
<select name="countries" id="">
  <option value="France">France</option>
  <option value="Japan">Japan</option>
  <option value="England">England</option>
</select>
<!-- Line Breaks -->
<br>
<br>
  1. Save.
  2. Create a textarea by adding the following after the line breaks that follow the dropdown:
<!-- Comments in a text box -->
<p>Comments</p>
<textarea name="comments" id="comments" cols="50" rows="5"></textarea>
<!-- Line Breaks -->
<br>
<br>
  1. Save.
  2. Create a "submit" button by adding the following after the line breaks that follow the textarea: 
  <input type="submit" value="submit">
  1. Save.
  2. In the browser, you should see the following:

    3. Exercise 9 Result

Code Walkthrough and Explanation


<form action="" method=""></form>

The <form> tag in HTML is used to create a form where users can input data that is sent to a server for processing. The action attribute specifies the URL of the server-side process that will handle the form data. The method attribute specifies the HTTP method that will be used to send the form data (typically this is either GET or POST). For now, we are leaving these attributes blank but will revisit this in later sections.


<label for=""></label>

The <label> tag is used to provide a text description for a form control, such as an input field. The for attribute is used to associate the label with a form control by specifying the id of the control.


<input type="" name="" id="" value="">

The <input> tag is used to create various types of form controls, such as text inputs, checkboxes, radio buttons, etc. The type attribute specifies the type of input to be created. The name attribute is used to identify the form element that the data entered by the user is associated with. It is sent to the server when the form is submitted and it is used to identify which field the data belongs.

The name attribute is especially important for radio and checkbox type of inputs. This attribute for the radio type of input is used to group a set of related radio buttons together so that only one of them can be selected at a time by the user. The name attribute of the checkbox input is used to give a name to the checkbox group. When multiple checkboxes share the same name attribute value, they are considered as part of the same group. This allows the user to select multiple options from the group. When the form is submitted, the selected checkbox values are sent to the server as part of the form data, identified by the name attribute value. This information can be used to perform further actions on the back-end based on the selected options.

The value attribute is used to specify the default value of the form control. The default value is the initial value that appears in the form field when the page is loaded. For <input> tags with type attributes of checkbox or radio, the value attribute is used to specify the value that will be sent to the server when the radio button is selected or checkbox is checked.

The different types of inputs include:


<select name="" id=""></select>

The <select> tag in HTML is used to create a drop-down list of options that the user can choose from.


<option value=""></option>

The <select> tag is accompanied by the <option> tag, which represents each individual option in the list. The value attribute of each <option> represents the value that will be sent to the server when the form is submitted. The text between the opening and closing tags represents the text that will be displated to the user in the drop-down list.


<textarea name="comments" id="comments" cols="50" rows="5"></textarea>

The <textarea> tag is an HTMl element used to create a multi-line input field where a user can enter text or other content. The <textarea> tag is defined by its starting and closing tags, with the content inside. The name attribute is used to give the textarea a unique name so that its value can be easily access in a form submission or with JavaScript. The id attribute is used to give the textarea a unique identifier that can be used to target the elemtn with CSS or JavaScript. The cols attribute is used to set the width of the textarea, in terms of the number of characters it can display, and the rows attribute is used to set the height of the textarea, in terms of the number of lines it can display.


Experiment with the Code


Video and Code References


Questions? Subscribe and ask in the video comments:



GitHub and Other References