CA Resources
Form

Element

Learn to create forms and use JavaScript to collect input and generate outputs.

Forms element

Now, let's talk about the form element, which is responsible for organizing the controls on a form.

Here’s a template for the form element’s syntax:

<form>
  label
  text-box, list-box, check-box, etc.
  label
  text-box, list-box, check-box, etc.
  ...
  submit-button
</form>

The example above is in HTML form structure that shows a basic outline of a form in HTML and is used to collect user input.

Form Element's Short Code

The following code implements a form with two text controls and a submit button:

<form>
  First Name:
  <input type="text" name="first" id="first" size="15" autofocus>
  <br />
  Last Name:
  <input type="text" name="last" id="last" size="15" autofocus>
  <br />
  <input type="button" value="Generate Email" onclick="generateEmail(this.form);">
</form>

Take note of how the code above aligns with the previously provided template.

User entries for the first and last names are stored in the first two text controls.

Details of text control syntax will be covered later, but not quite yet. A button serves as the bottom control. The generateEmail method, which creates an email address by combining the entered first and last names, is called by the button's onclick event handler when it is clicked. We’ll explain the event handler’s form argument later when we present the web page that this form is part of. But first, let’s finish talking about forms.

The <form> tag defines the form element, which groups input elements and buttons together, enabling data collection from the user. Within the form, the label "First Name:" is used to indicate that the following text input field is for entering the user's first name.

The input field itself is defined with <input type="text" id="first" size="15">. The type="text" attribute specifies that this input field is intended for text input. The id="first" attribute provides a unique identifier for the field, which can be used for JavaScript manipulation and CSS styling. The size="15" attribute sets the visible width of the input field to accommodate approximately 15 characters, although this does not restrict the actual amount of text that can be entered; it merely affects the field's appearance.

The label "Last Name:" similarly indicates that the subsequent input field is for entering the user's last name. This field is defined with <input type="text" id="last" size="15">. Here, type="text" specifies that the field is for text input, id="last" assigns a unique identifier, and size="15" determines the visible width of the input field, allowing it to display about 15 characters.

Finally, the <input type= "button" value="Generate Email" onclick="generateEmail(this.form);"> defines a button that triggers a JavaScript function when clicked. The type="button" attribute indicates that this is a button used for client-side actions rather than form submission. The value="Generate Email" sets the text displayed on the button. The onclick="generateEmail(this.form);" attribute attaches an event handler that calls the generateEmail function when the button is clicked. The this.form argument passes the current form object to the function, enabling it to interact with and retrieve values from the form fields.

Example of Web Page with Form to Input Data

Let’s create a simple web page with a form that allows users to input their first and last names, generate an email address based on the input, and display the generated email address on the page.

Create the HTML form

Use a form that collects the first name and last name as inputs.

The form should have an input field for the first name and another for the last name.

Add a button labeled "Generate Email" to trigger the email generation process.

<!DOCTYPE html>
<html>
  <head>
    <title>Email Address Generator</title>
  </head>
  <body>
    <form> 
      First Name: 
      <input type="text" name="first" id="first" size="15" autofocus> 
      <br /> 
      Last Name: 
      <input type="text" name="last" id="last" size="15" autofocus> 
      <br /> 
      <input type="button" value="Generate Email"> 
    </form> 
  </body>
</html>

Write JavaScript to generate the email address

In the <script> section, create a generateEmail function.

This function will combine the first and last name entered by the user and append @gmail.com to form the email address.

<!DOCTYPE html>
<html>
  <head>
    <title>Email Address Generator</title>
    <script type="text/javascript"> 
      function generateEmail(form) { 
        // Generate the email address using form values
        var email = form.elements["first"].value + form.elements["last"].value + "@gmail.com"; 
      } 
    </script> 
  </head>
  <body>
    <form>
      First Name:
      <input type="text" name="first" id="first" size="15" autofocus>
      <br />
      Last Name:
      <input type="text" name="last" id="last" size="15" autofocus>
      <br />
      <input type="button" value="Generate Email" onclick="generateEmail(this.form);">
    </form>
  </body>
</html>

Display the generated email address

After the email is generated, display it on the page inside the <p> element with the id="email".

<p id="email"></p>

Ensure the form is reset after submission and the focus is brought back to the first name input field for better user experience.

generateEmail
form.reset();
form.elements["first"].focus();

Source code for Email Address Generator web page

<!DOCTYPE html>
<html>
  <head>
    <title>Email Address Generator</title>
    <script type="text/javascript">
      function generateEmail(form) {
        // Generate the email address using form values
        var email = form.elements["first"].value + form.elements["last"].value + "@gmail.com";
 
        // Set the innerHTML of the <p> element with id "email"
        document.getElementById("email").innerHTML = email; 
 
        // Reset the form and focus on the first input
        form.reset(); 
        form.elements["first"].focus(); 
      }
    </script>
  </head>
  <body>
    <form>
      First Name:
      <input type="text" name="first" id="first" size="15" autofocus>
      <br />
      Last Name:
      <input type="text" name="last" id="last" size="15" autofocus>
      <br />
      <input type="button" value="Generate Email" onclick="generateEmail(this.form);">
      <p id="email"></p> 
    </form>
  </body>
</html>

As shown in the code above, when you run the code, the user enters their first and last names and clicks the "Generate Email" button, the JavaScript function generateEmail, creates an email address using the provided names, displays it in the <p> element, and resets the form. The form’s first input field is automatically focused after the reset.

Example

This example uses Tailwind CSS for styling and shadcn-ui for form elements.

The component is for demo purposes, but you can achieve similar functionality with the code provided above.

Edit on GitHub

Last updated on

On this page