People will also abandon a site when they don’t understand an error message, can’t navigate through fields easily, or can’t get the help they need right away.

This guide will show you how to create automated systems that detect these issues before your users do. Together, we'll write code that systematically checks your forms so you don’t have to go through each field by hand in the hopes of finding problems.

Here's what we'll build together:

• Scripts that confirm your error messages are helpful and specific rather than generic and annoying.

• Automated checks that guarantee the hint text appears in the appropriate location and at the appropriate time.

• Tests to ensure keyboard users can navigate your forms without becoming lost or stuck.

• A comprehensive audit system that performs these checks automatically and provides you with a list of fixes ranked in order of priority.

• Integration with your development process so that each time you make a code change, these checks are performed.

By the end of this handbook, you'll know how to:

• Configure automated audits for any application form.

• Verify error messages against accessibility guidelines and usability best practices.

• Make sure the hint text aids users rather than confounds them.

• Verify that all users can finish your forms by testing the keyboard navigation.

• Link audit findings to actual business metrics, such as conversion rates.

• As part of your deployment procedure, run these audits automatically.

You can run the functional JavaScript code in each section right away. Because the examples use vanilla JavaScript, they can be used with any framework, including React, Vue, Angular, or simply HTML. Although you don't have to be an expert, you should be able to follow along with JavaScript to get this most out of this guide.

Table of Contents

1. Why Should You Automate Form Audits in the First Place?

2. How to Define Concise Objectives and Scope

3. How to Scope Audit Boundaries

4. How to Incorporate Heuristic Evaluation and Quantitative Data

5. How to Define Automated Test Cases for Form Components

6. How to Consistently Confirm Keyboard Navigation Flows

7. AI-Informed Navigation Pattern Detection

8. Conclusion

Why Should You Automate Form Audits in the First Place?

Manual testing will typically find easy problems. But it may miss the systematic issues with forms across your entire application. You know the type of errors I’m talking about – those that don’t state incorrect values, missing keyboard support for fields, or hints that don’t have a clear place for help based on static design.

Research on user experience design shows that an effective UX can be strategically built, refined, or designed by using continuous feedback loops (Source: Okonkwo, Research Gate). Automated audits are a good way of putting this into practice, as they can help you find issues at scale before you release your product.

The key advantage here is coverage. You can prepare form UX audit basics so you and your teammates can check every form field, validation rule, and keyboard interaction in a systematic way.

Key Form Components to Audit

Before we create our roadmap for the UX audit, let’s talk about the three main elements of forms that typically have issues:

• Error states indicate what went wrong, as well as how to fix it. The clearer they are, the better: the confusion of generic messages like "Invalid input" frustrates users. In contrast, specific feedback like "Email must contain @ symbol" is specific enough to help them get things completed.

• Hint text helps prevent errors before users can input anything. Proactive guidance like "Password must contain 8+ characters" provides realistic expectations. Placing hint text in the right location and conveying its message at the appropriate time also determines how useful the hint text will be.

• Keyboard flows distinguish accessible forms from broken forms. Tab order, focus order, and keyboard shortcuts dictate whether a user can complete their form without a mouse.

To guide you through the audit workflow for each component, we’ll focus on three user flows: a sign-up form, checkout, and a contact form. All of these affect the conversion rate of a product’s users. And each of these elements maps to multiple metrics you can track.

We’ll use Nielsen Norman Group's 10 usability heuristics (Source: Jakob Nielsen, NNgroup) as a foundation while incorporating any data indicators. These heuristics are:

• System status visibility: Users should always be aware of what's going on thanks to prompt feedback

• System and real-world match: Use the user's language instead of technical terms

• User freedom and control: Enable users to quickly correct errors

• Consistency and standards: Adhere to platform norms so users don't have to question whether various terms or behaviors have the same meaning.

• Error prevention: Design to stop issues before they start

• Recognition rather than recall: Show options rather than making users memorize details.

• Flexibility and efficiency of use: Provide shortcuts for experienced users while keeping things simple for beginners.

• Aesthetic and minimalist design: Don't clutter interfaces with irrelevant information.

• Help users recognize, diagnose, and recover from errors: Error messages should clearly explain the problem and suggest a solution.

• Help and documentation: Provide easy-to-search help when needed.

For form audits, we'll focus especially on heuristics #5 (error prevention through hint text), #6 (making requirements visible), and #9 (clear error recovery). These directly affect whether users can complete forms successfully.

There’s one more important thing to note before we proceed. For each component, you’ll want to identify what tests you can automate as part of your test case. For each form component, start building checks programmatically for several criteria:

• Accessibility – for contrast ratios, ARIA labels, and focus indicators.

• Performance – for the time it takes to validate fields and render error messages.

• Visual consistency – for error state styling, hint text patterns, and keyboard focus.

We’ll prioritize fixes with a high impact that will help prevent users from abandoning a form. Also, each audit will produce actionable information along with a line of code, acceptance criteria, and example code for fixes.

Now, let’s start building our form UX audit workflow.

How to Define Concise Objectives and Scope

Before you even put your fingers to the keyboard, you'll want to determine what exactly you’re measuring and for what purpose. There’s a golden rule: ambiguous statements will yield ambiguous results. Having specific objectives linked to user behavior and business metrics is what creates actionable audits.

Identifying Form Types and Objectives

First, you need to know what form you’re going to audit. Let’s start by mapping the three forms that have the greatest direct impact on the success of your application and defining the nuances and objectives of each one.

1. A signup form’s key goal is user acquisition.

Every friction point - like poorly defined password requirements, vague expectations for email formats, and a lack of field labels - means a user will likely abandon the signup process. Your audit must identify these user flows.

2. Checkout forms are aimed at bringing revenue

User engagement improves significantly when applications use user-centered design principles – shocking, right? (Source: Okonkwo, ResearchGate). In checkout flows, this means that error messages appear inline, hints show requirements before a user can type, and keyboard navigation follows the expected tab order from shipping to payment fields.

3. Contact forms have the objective of establishing communication

Often, devs pay less attention to contact forms than to transactional forms. But contact forms are crucial for proposal requests, customer support requests, collaboration requests, and so on. A broken contact form can mean lost business.

Now that you’ve identified the type of form and its key objective, let’s do something equally important: link these high-level objectives to specific, measurable metrics.

Connecting Objectives and Metrics to Track

Every objective for the audit maps to a set of measurements. Here’s how to build this continuum:

Error message metrics

Your audit should evaluate whether error messages fulfill three criteria:

1. Specificity (Does the message indicate what the problem is?),

2. Timing (In what context will the user see the error?), and

3. Actionable (Does the message explain what the user should do to recover?).

For example, "password too weak" does not provide actionable information and isn’t specific enough, while "Password must have at least one uppercase character, one number, and one special character" is highly actionable and provides clear information on what the user needs to do.

You can measure this by tracking two things: what percentage of your error messages mention the specific field name, and how many errors show up immediately when users leave a field versus only appearing after they hit submit.

Hints can reduce user errors before they occur. Your audit should validate:

• Whether a hint’s positioning is proactive (for instance, is the hint text located before users engage the provided input field?).

• Visual proximity (Is the hint text next to the input field?).

• Accessibility (for example, are the hints connected to the fields programmatically using aria-describedby?)

The latter is especially important, as screen readers require explicit connections to announce hints at the correct time. You’ll want to measure these using metrics like the time to display a hint (immediate vs delayed) and the number of ARIA-associated hint elements.

Keyboard flow metrics are also directly connected to accessibility

Your audit should define if there is a correct order logic. Do fields follow the visual layout? When the tabindex jumps around sporadically across the screen, users lose context.

It should also determine if the focus visibility is the current field and if that’s clearly indicated. When the focus is invisible or subtle, you end up making your users guess where they are.

Keyboard shortcuts let users submit forms, clear fields, or jump between sections without touching their mouse. Everyone benefits from this, not just people using screen readers or other assistive technology.

You will want to measure these with the tabindex sequence alignment to the visual layout, focus indicator contrast ratios, and by defining if there are keyboard shortcuts for submitting, clearing, and moving about the forms.

Now that you have outlined the key metrics and principles applicable to the form you’re auditing, it’s time to define the specific area you want to focus on.

How to Scope Audit Boundaries

You’ll need to define exactly what forms and fields your audit will cover. You’ll want to start small in order to build working automations and then slowly expand.

Setting the Initial Scope

You should start with forms in your application’s critical user paths. We’ll use the below JavaScript snippet as an example. Paste this configuration object into your audit automation tool or script:

const auditScope = {
  signupForm: {
    url: '/signup',
    fields: ['email', 'password', 'confirmPassword'],
    priority: 'critical'
  },
  checkoutForm: {
    url: '/checkout',
    fields: ['cardNumber', 'expiryDate', 'cvv', 'billingZip'],
    priority: 'critical'
  },
  contactForm: {
    url: '/contact',
    fields: ['name', 'email', 'subject', 'message'],
    priority: 'high'
  }
};

In the code above, the auditScope object lists critical forms (signup, checkout, and contact forms), specifies their URLs along with important fields to check (such as email, password, cardNumber), and lists their priority level. This helps the auditing system see what resources to prioritize.

The priority property allows your audit system to prioritize high-impact forms first when protocol limits the resources available. Such a method prevents your system from being overwhelmed with too broad a scope.

Setting the Audit Execution Plan

Your objectives dictate how the audit system will act. After you have defined the scope, you can divide the workflow into several definite phases.

• Phase 1: Static analysis will address the structure of the HTML document and verify the ARIA attributes, tab indices, and markup patterns for semantic use. This can discover structural issues that require no user interaction.

• Phase 2: Dynamic testing simulates user interactions to identify the occurrence of errors, when hints are displayed, and when a keyboard user would navigate to which elements. This can identify runtime problems that were not revealed through static analysis.

• Phase 3: Visual verification measures spacing, contrast ratios, or positioning of elements, but using visually computed styles. This allows us to examine the visual design in relation to meeting either UX or UI objectives.

Each phase will result in findings that continually tie back to your defined objectives. In the case of a failed check, the audit report will show which objective contributed to the finding, the current state of the component, the target states, and recommendations for the solution.

Field-level objectives

For each field, you should tell the script or the automated tool what the audit is actually checking. Each check is a specific automated test. When the audit is executed, every check is confirmed for every field, and failures are noted.

For instance, in the following snippet, for each field we provide (like "email" or "password"), we list three categories of checks: errorChecks, hintChecks, and keyboardChecks. When you link this object to your audit automation system (for example, UI testing frameworks, accessibility checkers), your audit automation system runs all these tests on every field. It will report any test failures so you can see which part of the input is broken or missing.

const fieldObjectives = {
  email: {
    errorChecks: [
      'hasInlineValidation',
      'errorMessageSpecific',
      'showsValidFormatExample'
    ],
    hintChecks: [
      'hintVisibleBeforeInteraction',
      'hintExplainsFormat',
      'hintAccessible'
    ],
    keyboardChecks: [
      'tabOrderCorrect',
      'focusVisible',
      'supportsAutocomplete'
    ]
  },
  password: {
    errorChecks: [
      'hasInlineValidation',
      'listsAllRequirements',
      'showsProgressIndicator'
    ],
    hintChecks: [
      'hintListsRequirements',
      'hintVisibleBeforeTyping',
      'hintPersistsDuringTyping'
    ],
    keyboardChecks: [
      'tabOrderCorrect',
      'focusVisible',
      'supportsPasswordManagers'
    ]
  }
};

This leads to a very granular, consistent, and repeatable test of important user input components so you can validate usability, accessibility, and correctness of the form.

Linking Objectives to Business KPIs

The findings of the audit should link back to business impact. Let’s look at how our objectives map to key performance indicators.

The impact on conversion rate should be direct and specific. For instance, improved error messages directly impact the form completion rate:

• Baseline. The current abandonment rate for forms.

• Target. Decrease abandonment by 15% due to clear error messages.

• Audit validation. 100% of error messages are clear and specific.

Reducing support tickets is another priority. In this case, better hint text provides less confusion:

• Baseline. Volume of support requests related to forms currently.

• Target. Decrease the number of support tickets by 25%.

• Audit validation. 100% of complex fields have proactive hints.

Accessibility compliance is another important goal. Keyboard navigation has a direct impact on the legal compliance and reach of a wider base of users. The example of the KPIs here can be the following:

• Baseline. Current level of WCAG conformance.

• Target. All forms to be WCAG 2.1 AA compliant.

• Audit validation. 100% of fields work with a keyboard only.

After you create such measurable criteria for success, you should actually give them as thresholds to your system. Here’s an example of how you can provide defined measures for passing and failing for the automated audit:

const auditThresholds = {
  errorMessages: {
    specificityScore: 0.9,  // 90% must include field-specific details
    inlineValidationPercentage: 1.0,  // 100% must show inline errors
    actionabilityScore: 0.85  // 85% must include fix instructions
  },
  hintText: {
    proactiveDisplayPercentage: 1.0,  // 100% must appear before interaction
    proximityMaxPixels: 8,  // Hints must be within 8px of fields
    ariaAssociationPercentage: 1.0  // 100% must have aria-describedby
  },
  keyboardFlow: {
    tabOrderCorrectnessScore: 1.0,  // 100% must follow visual layout
    focusContrastRatio: 3.0,  // Minimum 3:1 contrast for focus indicators
    shortcutCoveragePercentage: 0.8  // 80% of actions must have shortcuts
  }
};

As you can see, under errorMessages, the specificityScore of 0.9 states that 90% of error messages must include details specific to each field. Also, within the hintText directions, the proactiveDisplayPercentage of 1.0 demands that the hints appear before the user starts typing, not after, for the test to be passed.

The 5Cs Framework for Audit Documentation

When you document your audit results, use the 5Cs framework to make sure your reports are actually useful:

• Coverage: Which forms and fields did you test? Be specific about the scope.

• Completion: Did you run all the planned checks? Note any that were skipped and why.

• Consistency: Do your results use the same format and terminology throughout? This makes reports easier to scan.

• Clarity: Can a developer read the failure report and know exactly what to fix? Include the current state, expected state, and code examples.

• Correctness: Are your checks testing the right things? Validate that failures match real user problems, not just technical violations.

This framework helps both designers and developers understand audit results and take action quickly.

How to Incorporate Heuristic Evaluation and Quantitative Data

Once you've established objectives, you’ll want to base your audit on the usability principles and behavior patterns of users. This combination of established usability heuristics along with quantitative data can help you verify that your automated checks are surfacing issues that users actually experience – and not fictional edge cases (Source: Jakob Nielsen, NNgroup).

The best way to do this is to map the issues to the common standard of the Web Content Accessibility Guidelines and use that as the basis for your audit (Source: WCAG 2.1, W3C Recommendation). For every identified problem, identify the WCAG success criteria that the issue violates. This will give you clear requirements that you can use as an automated check and that should be commonly understood by everyone working on the audits.

In the automated script, you can use the following code to map these guidelines:

const wcagMapping = {
  errorIdentification: {
    criterion: '3.3.1',
    level: 'A',
    requirement: 'Error messages must identify the item in error',
    testFunction: 'checkErrorIdentification'
  },
  errorSuggestion: {
    criterion: '3.3.3',
    level: 'AA',
    requirement: 'Error messages must provide suggestions for correction',
    testFunction: 'checkErrorSuggestions'
  },
  labelInName: {
    criterion: '2.5.3',
    level: 'A',
    requirement: 'Accessible name must contain visible label text',
    testFunction: 'checkLabelInName'
  },
  focusOrder: {
    criterion: '2.4.3',
    level: 'A',
    requirement: 'Focus order must preserve meaning and operability',
    testFunction: 'checkFocusOrder'
  }
};

If any part of the form violates WCAG 3.3.1 – perhaps it doesn’t identify the field when it provides an error – your audit report can document it as follows:

"The error message displayed on the email field said 'Invalid input' but didn’t identify the requirement it didn't meet. WCAG 3.3.1 states that the error must identify the field with the error (potential fix: 'Email must have an @ symbol'). 3.3.1 is the mapped criteria."

Nielsen's heuristics tell you what good usability looks like. But tools like Google Analytics and Hotjar show you what users actually do on your forms. When you combine both – usability principles and real user behavior data – you make better decisions about which problems to fix first.

Research shows this combined approach catches more real issues than either method alone (Sources: Souza and others, IEEE Access). Use both types of data to prioritize what your automated audits should check.

Define Binary Pass/Fail Criteria

Automation requires clear results. Your audit must document whether a component passed or failed its WCAG criteria. The process must yield binary results – yes/no, positive/negative.

For instance, the following code incorporates a definite, binary audit check to verify whether a form field is compliant with WCAG 3.3.1 criteria for error identification (Source: WCAG 2.1, W3C Recommendation):

function checkErrorIdentification(field) {
  const errorElement = field.querySelector('[role="alert"], .error-message');
  
  if (!errorElement) {
    return {
      pass: false,
      wcag: '3.3.1',
      severity: 'critical',
      message: `Field "${field.name}" lacks error message element`,
      fix: 'Add aria-describedby pointing to error container'
    };
  }
  
  const errorText = errorElement.textContent.trim();
  const hasFieldReference = errorText.toLowerCase().includes(field.name.toLowerCase()) 
    || errorText.toLowerCase().includes(field.labels[0]?.textContent.toLowerCase());
  
  if (!hasFieldReference) {
    return {
      pass: false,
      wcag: '3.3.1',
      severity: 'major',
      message: `Error message "${errorText}" doesn't identify field`,
      fix: `Include field name in error: "\({field.labels[0]?.textContent} \){errorText}"`
    };
  }
  
  return { pass: true, wcag: '3.3.1' };
}

The error message identified the error, and each component definitively passes or fails the criterion. There’s no room for interpretation or doubt.

Standardize Error Messages and Hint Messages

Keep in mind that automated functions require familiarity and consistency. You can create centralized repositories with libraries of accepted usage patterns and approval that developers can refer to, and your tests can check that your forms are using standardized messages.

For example, in the following snippet, the errorLibrary object provides a single source of truth for every acceptable error message your application will display for specific fields. For each field, there are appropriately defined message strings for common validation issues (like empty, invalid, duplicate). Similarly, the hintLibrary object provides a single source of truth for every hint text that prefaces user input.

const errorLibrary = {
  email: {
    empty: 'Email address is required',
    invalid: 'Email must include @ symbol and domain (example: user@domain.com)',
    duplicate: 'This email is already registered. Try signing in instead.'
  },
  password: {
    empty: 'Password is required',
    tooShort: 'Password must be at least 8 characters',
    missingUppercase: 'Password must include at least one uppercase letter',
    missingNumber: 'Password must include at least one number',
    missingSpecial: 'Password must include at least one special character (!@#$%^&*)'
  }
};

const hintLibrary = {
  email: 'Enter your email address (example: name@company.com)',
  password: 'Create a password with 8+ characters, including uppercase, number, and special character',
  phone: 'Enter 10-digit phone number without dashes (example: 5551234567)'
};

By having a single source of these patterns, you won’t run the risk of writing duplicate or misaligned messages in different areas across the app, increasing maintainability.

Utilize Definite ARIA Identifiers

If you use consistent ARIA attributes, you can automate checks. As an example, in the following snippet, we explicitly define which ARIA attributes connect error messages, hints, and fields. The auditARIAImplementation function checks whether each field has an accessible label (either an HTML element or an aria-label attribute) to meet WCAG 1.3.1. Without it, users will likely find it hard to identify the purpose of the input.

function auditARIAImplementation(field) {
  const checks = {
    hasLabel: !!field.labels?.length || !!field.getAttribute('aria-label'),
    hasDescription: !!field.getAttribute('aria-describedby'),
    hasErrorMessage: !!field.getAttribute('aria-errormessage'),
    hasRequired: field.hasAttribute('required') || field.getAttribute('aria-required') === 'true'
  };
  
  const failures = [];
  
  if (!checks.hasLabel) {
    failures.push({
      wcag: '1.3.1',
      message: `Field "${field.name}" lacks accessible label`,
      fix: 'Add <label> element or aria-label attribute'
    });
  }
  
  if (!checks.hasDescription) {
    failures.push({
      wcag: '3.3.2',
      message: `Field "${field.name}" lacks hint text association`,
      fix: 'Add aria-describedby pointing to hint element ID'
    });
  }
  
  if (field.dataset.validatable && !checks.hasErrorMessage) {
    failures.push({
      wcag: '3.3.1',
      message: `Validatable field "${field.name}" lacks aria-errormessage`,
      fix: 'Add aria-errormessage attribute pointing to error container ID'
    });
  }
  
  return {
    pass: failures.length === 0,
    failures
  };
}

This function checks for specific ARIA-tied patterns that your design system prescribes. The great thing is that you can check the code in CI/CD pipelines to maintain implementation standards.

The next section will help you identify specific automated test cases for errors, hints, and keyboard flows.

How to Define Automated Test Cases for Form Components

Now that you've established a baseline with WCAG standards, heuristics, and user data, you can create specific automated test cases. Each test case targets a measurable quality for the error messages, hint text, or keyboard navigation functionality of each form component. The following sections will provide concrete ways to automate these checks for each form component.

Automated Error Message Checks

Error messages are crucial conversion points. Your automated checks should ensure that each error message meets the specificity, timing, and actionability criteria. Every error message must convey what exactly has gone wrong. Generic error messages don’t pass this quality check.

For automation, your checks can provide insight as to whether the error message references the specific construction of the field. For instance, in the following snippet, the method verifies that every error message that appears in a form serves to pinpoint the input problem, not use a vague general expression.

function auditErrorSpecificity(formId) {
  const form = document.getElementById(formId);
  const fields = form.querySelectorAll('input, textarea, select');
  const failures = [];
  
  fields.forEach(field => {
    const errorElement = document.querySelector(`[aria-describedby="${field.id}-error"]`);
    if (errorElement) {
      const errorText = errorElement.textContent.toLowerCase();
      const genericTerms = ['invalid', 'error', 'wrong', 'incorrect'];
      const isGeneric = genericTerms.some(term => 
        errorText.includes(term) && errorText.split(' ').length < 4
      );
      
      if (isGeneric) {
        failures.push({
          field: field.id,
          message: errorText,
          issue: 'Generic error message lacks specificity',
          wcag: '3.3.1 Error Identification'
        });
      }
    }
  });
  
  return failures;
}

It looks through field-specific error messages and flags any that use common generic terms in a short, vague message, as ambiguous messages don’t serve the purposes of WCAG 3.3.1 since they don’t provide an actionable correction for user input (Source: WCAG 3.3.1, WC3).

Validation Timing of Inline Messages

Error messages should show the message when the user leaves the field and not just at submission. Research demonstrates that even just the timing of the feedback alone significantly disrupts user performance. Your automation should check whether errors are displayed inline (Source: Al-Khalifa and others, ResearchGate).

This code verifies that error messages appear immediately when a user leaves a required input field on blur, as opposed to only showing errors after submitting the entire form.

function auditErrorTiming(formId) {
  const form = document.getElementById(formId);
  const fields = form.querySelectorAll('input[required], textarea[required]');
  const failures = [];
  
  fields.forEach(field => {
    let hasBlurValidation = false;
    let hasInputValidation = false;
    
    // Check for blur event listeners
    const blurListeners = getEventListeners(field).blur || [];
    hasBlurValidation = blurListeners.length > 0;
    
    // Check for input event listeners
    const inputListeners = getEventListeners(field).input || [];
    hasInputValidation = inputListeners.length > 0;
    
    if (!hasBlurValidation && !hasInputValidation) {
      failures.push({
        field: field.id,
        issue: 'No inline validation detected',
        recommendation: 'Add blur or input event validation',
        wcag: '3.3.1 Error Identification'
      });
    }
  });
  
  return failures;
}

This audit verifies that an event handler which runs against an inline validator is in place for blur and input events on input fields. It also checks that it flags any that fail to have these interactions as a failure under the WCAG 3.3.1 Error Identification guideline (Source: WCAG 3.3.1, WC3).

Confirm Actionable Recovery Guidance

Error messages must clarify how to recover from any faults or issues. "Password too weak" fails the user. In contrast, the error message "Password must be 8+ characters, contain at least 1 upper case letter, and one numeric character" gives the user enough information to make the proper adjustment.

Let’s take an example of some code that audits password fields to ensure that the error message includes specific actionable recovery instructions outlining character types or character length and clearly guides users on how to correct input errors (Source: WCAG 3.3.3, WC3).

function auditErrorActionability(formId) {
  const form = document.getElementById(formId);
  const failures = [];
  const passwordFields = form.querySelectorAll('input[type="password"]');
  
  passwordFields.forEach(field => {
    const errorElement = document.getElementById(`${field.id}-error`);
    if (errorElement) {
      const errorText = errorElement.textContent;
      const hasSpecificRequirements = /\d+/.test(errorText) || 
        /uppercase|lowercase|special|character|digit/.test(errorText.toLowerCase());
      
      if (!hasSpecificRequirements) {
        failures.push({
          field: field.id,
          message: errorText,
          issue: 'Error lacks specific recovery guidance',
          wcag: '3.3.3 Error Suggestion'
        });
      }
    }
  });
  
  return failures;
}

If the error message doesn’t contain these characters or meet the length requirement, the function will flag the instance as a failure with a corresponding WCAG reference.

Automated Rich Hint Text Auditing

Rich text hints help prevent errors (and hopefully the need for an error message). Research suggests that users who are given proactive guidance improve form completion by up to 23% (Source: Okonkwo, ResearchGate). Your automation should confirm that the right hints appear at the right time, in the right places, with appropriate accessible information and presentation.

This function audits form fields to ensure that hint text is seen before the user interacts with the form, helping avoid user errors while filling out the form.

function auditHintTiming(formId) {
  const form = document.getElementById(formId);
  const complexFields = form.querySelectorAll('input[type="password"], input[pattern]');
  const failures = [];
  
  complexFields.forEach(field => {
    const hintElement = document.querySelector(`[id="${field.getAttribute('aria-describedby')}"]`);
    
    if (!hintElement) {
      failures.push({
        field: field.id,
        issue: 'Complex field missing proactive hint text',
        wcag: '3.3.2 Labels or Instructions'
      });
    } else {
      // Check if hint is visible before interaction
      const computedStyle = window.getComputedStyle(hintElement);
      const isVisible = computedStyle.display !== 'none' && 
        computedStyle.visibility !== 'hidden';
      
      if (!isVisible) {
        failures.push({
          field: field.id,
          issue: 'Hint text hidden until interaction',
          wcag: '3.3.2 Labels or Instructions'
        });
      }
    }
  });
  
  return failures;
}

If the hint doesn't exist or doesn’t show until after the user interacts with the form, the function will flag it as a failure to satisfy WCAG 3.3.2 Labels or Instructions for a generally consistent and user-friendly form design (Source: WCAG 3.3.3, WC3).

How to Consistently Confirm Keyboard Navigation Flows

Keyboard accessibility is required for WCAG compliance, and you can automate most of the testing with code. When people can't use your forms with just a keyboard, they often give up and leave. This directly hurts your conversion rates.

When you document how keyboard navigation should work, you can write automated tests to check if it actually works that way.

Outlining the Interactions

Your audit should document expected keyboard interactions for each component. If there's a modal dialog, note that Tab will cycle through the elements within the modal, Escape closes the modal, and the focus returns to the element that opened the modal.

For forms, note that Tab advances through the fields in visual order, Shift+Tab will go back, and Enter will submit the form from the submit button only.

You should document these flows in a data-driven way. A structured format with columns for "Component," "Keystroke," "Expected Action," and "Relevant WCAG" will make both human review and automated parsing much easier:

const keyboardPatterns = {
  'modal-dialog': {
    tab: 'Focus next element within modal',
    shiftTab: 'Focus previous element within modal',
    escape: 'Close modal and return focus',
    wcag: '2.1.1 Keyboard, 2.4.3 Focus Order'
  },
  'form-field': {
    tab: 'Move to next field in visual order',
    shiftTab: 'Move to previous field',
    enter: 'Submit only from submit button',
    wcag: '2.1.1 Keyboard, 2.4.3 Focus Order'
  },
  'dropdown-select': {
    space: 'Open dropdown menu',
    arrowDown: 'Navigate to next option',
    arrowUp: 'Navigate to previous option',
    enter: 'Select current option',
    escape: 'Close dropdown without selection',
    wcag: '2.1.1 Keyboard, 4.1.2 Name, Role, Value'
  }
};

This code aligns these patterns with WCAG guidelines 2.1.1 (Keyboard Accessibility), 2.4.3 (Focus Order), and 4.1.2 (Name, Role, Value) to support users who rely on keyboard inputs (Source: WCAG Understanding Docs, WC3).

Automated Tab Order Validation

Tab order should follow the visual layout of the page. When focus jumps around randomly, users get lost. The code below checks that focus moves through fields in the order people expect – top to bottom, left to right. It catches cases where focus skips around even when the tabindex values look correct.

function auditTabOrder(formId) {
  const form = document.getElementById(formId);
  const focusableElements = form.querySelectorAll(
    'input, select, textarea, button, a[href], [tabindex]:not([tabindex="-1"])'
  );
  const failures = [];
  
  const elements = Array.from(focusableElements).map(el => ({
    element: el,
    position: el.getBoundingClientRect(),
    tabindex: parseInt(el.getAttribute('tabindex')) || 0
  }));
  
  for (let i = 1; i < elements.length; i++) {
    const prev = elements[i - 1];
    const curr = elements[i];
    
    // Check if tab order follows visual top-to-bottom, left-to-right
    const visuallyBefore = prev.position.top < curr.position.top || 
      (prev.position.top === curr.position.top && prev.position.left < curr.position.left);
    
    if (!visuallyBefore && prev.tabindex === curr.tabindex) {
      failures.push({
        field: curr.element.id,
        issue: 'Tab order does not match visual layout',
        wcag: '2.4.3 Focus Order'
      });
    }
  }
  
  return failures;
}

In essence, the audit identifies failures to adhere to WCAG 2.4.3 Focus Order while preserving context and the ability to interact with keyboard users as they interact with form fields (Source: WCAG 2.4.3, WC3).

Verify Focus Visibility

Focus indicators need to be clearly identifiable. According to research, visible focus indicators improved typing and reduced errors significantly (Source: Liu and others, ResearchGate).

For instance, focus styles can include an outline, border, or shadow, but they must have enough contrast against the background (at least 3:1) to satisfy WCAG 2.4.7 Focus Visible and 1.4.11 Non-text Contrast (Source: WCAG Understanding Docs, WC3). Consider the following example:

function auditFocusVisibility(formId) {
  const form = document.getElementById(formId);
  const focusableElements = form.querySelectorAll('input, select, textarea, button');
  const failures = [];
  
  focusableElements.forEach(element => {
    element.focus();
    const computedStyle = window.getComputedStyle(element);
    
    // Check for visible focus indicator
    const hasOutline = computedStyle.outline !== 'none' && 
      computedStyle.outlineWidth !== '0px';
    const hasBorder = computedStyle.borderStyle !== 'none';
    const hasBoxShadow = computedStyle.boxShadow !== 'none';
    
    // Check contrast ratio for focus indicator
    const outlineColor = computedStyle.outlineColor;
    const backgroundColor = computedStyle.backgroundColor;
    const contrastRatio = calculateContrastRatio(outlineColor, backgroundColor);
    
    if (!hasOutline && !hasBorder && !hasBoxShadow) {
      failures.push({
        field: element.id,
        issue: 'No visible focus indicator',
        wcag: '2.4.7 Focus Visible'
      });
    } else if (contrastRatio < 3) {
      failures.push({
        field: element.id,
        contrastRatio: contrastRatio.toFixed(2),
        issue: 'Focus indicator contrast ratio below 3:1',
        wcag: '1.4.11 Non-text Contrast'
      });
    }
  });
  
  return failures;
}

Good focus styling helps keyboard users see where they are on the page. This code checks that focus indicators are visible and have enough contrast against the background so users can tell which field they're currently in.

Using Automated Testing Tools

To speed up and automate audits even more efficiently, you can use tools such as Google Lighthouse, axe-core, and Cypress. You can also combine these tools to be even more powerful – for example, using axe-core in conjunction with Cypress is the most comprehensive test suite I can suggest.

Here is a workflow you can follow:

async function runAccessibilityAudit(formId) {
  const form = document.getElementById(formId);
  const results = await axe.run(form, {
    rules: {
      'label': { enabled: true },
      'aria-required-attr': { enabled: true },
      'aria-valid-attr-value': { enabled: true },
      'keyboard-navigation': { enabled: true },
      'focus-order-semantics': { enabled: true }
    }
  });
  
  const violations = results.violations.map(violation => ({
    rule: violation.id,
    impact: violation.impact,
    description: violation.description,
    wcag: violation.tags.filter(tag => tag.startsWith('wcag')),
    elements: violation.nodes.map(node => node.target)
  }));
  
  return violations;
}

When you document keyboard patterns and automate the checks, you make sure everyone can complete your forms – whether they use a mouse, keyboard, or screen reader. Run these checks in your CI/CD pipeline to catch problems before they go live.

AI-Informed Navigation Pattern Detection

Machine learning models can help identify strange keyboard navigation sequences that signal potential usability challenges. Combining mouse tracking with artificial intelligence can give you insights into user behavior that aren't possible using traditional strategies (Sources: Souza and others, IEEE Access).

The logic could similarly be applied to keyboard navigation studies, as AI models can be trained on typical successful navigation patterns to signal when users are struggling in their keyboard flows.

Pattern Detection for Navigation Using AI

AI tools can assess keyboard navigation to find non-compliant actions during testing. For instance, through machine learning, the code sample below captures, evaluates, and categorizes unusual or problematic keyboard navigation behavior on web forms and detects unique keyboard navigation or k-action sequences that are likely indicative of usability concerns.

async function detectNavigationAnomalies(formId) {
  const navigationData = captureKeyboardSequence(formId);
  const features = extractNavigationFeatures(navigationData);
  
  // Use machine learning to classify navigation patterns
  const model = await loadTrainedModel('keyboard-anomaly-detection');
  const predictions = await model.predict(features);
  
  const anomalies = predictions.filter(p => p.confidence > 0.8).map(p => ({
    sequence: p.keystrokes,
    anomalyType: p.classification,
    severity: p.confidence,
    recommendation: generateRecommendation(p.classification)
  }));
  
  return anomalies;
}

function extractNavigationFeatures(data) {
  return {
    tabSequenceLength: data.tabs.length,
    backtrackCount: countBacktracks(data.tabs),
    focusTrapIndicators: detectFocusTraps(data),
    averageTimePerElement: calculateAverageTime(data),
    sequenceDeviation: measureSequenceDeviation(data)
  };
}

The code structure captures the user's keyboard navigation actions on specified forms using captureKeyboardSequence(formId), which means that the user has entered keystrokes, such as tabbing and focusing between fields.

Using extractNavigationFeatures(data), the code processes the Raw keyboard navigation sequence by calculating metrics. Lastly, the code loads a previously-trained ML model and provides the extracted features to the model to be classified into their respective categories along with a confidence score.

Any keyboard navigation anomalies detected with a confidence score of 0.8 or higher will be filtered. The detected keystroke sequences, type of anomaly, severity, and specific suggestions will be included in the final results report for later review by the user.

Fuzzy Logic Paradigm for Navigation-Performance Scoring

Collaborative feedback systems can help improve the virtual keyboard user experience. Fuzzy logic lets you combine multiple measurements – like focus visibility and tab order – into a single score that better reflects the actual user experience. (Source: Liu and others, ResearchGate).

For example, the following code creates a fuzzy inference system that evaluates two inputs: Focus Visibility and Tab Order Logic. These two inputs are evaluated using fuzzy logic and associated rules to arrive at a single score representing the total efficiency of keyboard navigation for a given application.

function createKeyboardNavigationFuzzySystem() {
  // Define fuzzy variables
  const focusVisibility = new FuzzyVariable('focusVisibility', 0, 100);
  focusVisibility.addTerm('poor', new TriangularMF(0, 0, 40));
  focusVisibility.addTerm('adequate', new TriangularMF(30, 50, 70));
  focusVisibility.addTerm('excellent', new TriangularMF(60, 100, 100));
  
  const tabOrderLogic = new FuzzyVariable('tabOrderLogic', 0, 100);
  tabOrderLogic.addTerm('confusing', new TriangularMF(0, 0, 40));
  tabOrderLogic.addTerm('acceptable', new TriangularMF(30, 50, 70));
  tabOrderLogic.addTerm('intuitive', new TriangularMF(60, 100, 100));
  
  const navigationEfficiency = new FuzzyVariable('navigationEfficiency', 0, 100);
  navigationEfficiency.addTerm('inefficient', new TriangularMF(0, 0, 40));
  navigationEfficiency.addTerm('moderate', new TriangularMF(30, 50, 70));
  navigationEfficiency.addTerm('efficient', new TriangularMF(60, 100, 100));
  
  // Define fuzzy rules
  const rules = [
    'IF focusVisibility IS excellent AND tabOrderLogic IS intuitive THEN navigationEfficiency IS efficient',
    'IF focusVisibility IS poor OR tabOrderLogic IS confusing THEN navigationEfficiency IS inefficient',
    'IF focusVisibility IS adequate AND tabOrderLogic IS acceptable THEN navigationEfficiency IS moderate'
  ];
  
  return new FuzzyInferenceSystem([focusVisibility, tabOrderLogic], navigationEfficiency, rules);
}

The resulting score is meant to be more representative of a user’s experience with the keyboard navigation system than other existing methods of measuring user satisfaction. This fuzzy inference system assesses keyboard navigation quality based on multiple dimensions at the same time, yielding scores in a similar range to user-reported satisfaction measurements (Source: Liu and others, ResearchGate).

Conclusion

This article has given you the tools and resources you’ll need to automate a UX audit of your app’s forms – from the initial setup through continuous integration.

You’ve learned:

• Three essential components of forms and the importance of addressing each component systematically.

• How to link objectives directly with business KPIs and user outcomes.

• How to set up automated testing for the specificity of errors, the timing of validation, and the direction for the next actionable step after an error.

• How to review the hint text on your forms: proactive display, proximity to the field it assists, and accessibility.

• How to validate keyboard navigation through verification of tab order, testing focus visibility, and using ARIA tags.

• How to incorporate WCAG criteria into your automated tests and to incorporate Nielsen's 10 Heuristics.

• How to prepare documentation for the handoff between Design and Development, using the "5Cs": Coverage, Completion, Consistency, Clarity, and Correctness.

Next steps:

• Begin with a single high-impact form in your application (signup or checkout) and run the basic automated checks on error messages and keyboard flows.

• Integrate one or two audit functions into your existing test suite to see how they surface issues you might have missed manually.

• Create a centralized error and hint message library for your most critical forms to ensure consistency.

• Gradually expand your audit coverage to additional forms and fields as you refine your automation approach.

• Add these checks to your CI/CD pipeline so they run automatically on every pull request, catching regressions before they reach users.

• Experiment with AI-powered anomaly detection for keyboard navigation patterns once your foundational audits are stable.

Most importantly, remember that form UX optimization is an ongoing practice, not a one-time fix. Start with the forms that directly impact your conversion metrics, validate that your automated checks catch real user problems, and expand your coverage systematically. Your goal should be to build a reliable system that continuously protects your users from friction.

About the author

Hope you enjoyed the article and found it helpful. I’ve been a contributor to freeCodeCamp for more than 8 years, and to make this piece more precise and detailed, I used some expert help.

I sincerely thank skilled designers from COAX Software for the UX and accessibility guidelines, and the developers who provided the audit automation code snippets (who both wished to stay anonymous). The company has a deep expertise in UI/UX design.

To find out more about me and read more content on tech and digital, visit https://www.linkedin.com/in/oleg-romanyuk/.

One of the most common elements where you’ll need to apply user input validation is via a form. This could be a user sign up form, a contact us form, or a simple questionnaire.

Outcomes of the Tutorial

By the end of this article , you will be able to:

• Understand common issues with form validation.
• How to utilise the Yup schema validation library alongside the Formik form library.
• How to build a form in React with full validation (same principles apply for React Native, with different component syntax).

Contents

• What is Validation?
• The Object to Be Validated
• Introducing Yup and Formik
• How to Add Validation to a Form
• Conclusion

What is Validation?

Validation is defined as:

the action of checking or proving the validity or accuracy of something.

But what does that mean in computer speak? This could be a multitude of things, but the premise still stands. You could be validating a variable value or an object against a pre-determined set of rules or regulations.

Examples of validation rules could be:

• Password must be at least 8 characters and contain a special character.
• Username must be unique.
• Date of birth must be received as a string, in a particular format, for example ISO8601

Let’s use the example of a user registration form on a website.

The Object to Be Validated

The form will comprise of several inputs to form a UserRegistration object. Like so‌:

interface UserRegistration {
  firstName: string;
  surname: string;
  email: string;
  dob: string;
}

Above is an interface (contract) for a UserRegistration object. It simply defines some key user information which needs to be collected, with all values being a string value.

While languages like TypeScript are useful for ensuring that we pass the correct types to functions throughout our application, they do not inherently validate the actual content or values within those types. TypeScript guarantees that a variable is of a specific type, such as a string or a number, but it does not verify if the content of that string or number meets specific criteria or constraints.

What If We Didn't Validate the Values?

Ok, before we move onto how to validate, let's look at what could happen if we don't validate.

Without validation, a user could input the following values:

Firstname: 1231301‌
‌Surname: Hello##test_101‌
‌Email: user_123@@email.to@.com‌
‌DoB: 10+12+1909

These values may seem perfectly acceptable, and your front end might allow them to be submitted without any issues. And the API will likely accept these values initially.

But when the API attempts to parse these values (converting) during the request processing, it will encounter errors and fail to process the request correctly.

There are several negative consequences to this approach:

1. Increased Server Load: The front end is making multiple invalid requests to the server, which unnecessarily strains the server. This extra load could have been avoided.
2. Potentially Higher Costs: The cost of handling these invalid requests can increase significantly, depending on your hosting plan and server configuration. Each invalid request consumes server resources that could be used more efficiently.
3. Poor User Experience (UX): Users will likely become frustrated if they repeatedly enter details, submit the form, and then receive error messages indicating that their inputs are invalid. This can lead to a negative perception of the application.

To mitigate these issues and reduce the number of invalid requests, we can implement 'client-side validation' to ensure that the data meets the required criteria before sending the API request.

Introducing Yup and Formik

Yup and Formik are both libraries which you can add to any React or React Native application via npm or yarn.

Yup is a schema building library that allows you to build schemas for validation at runtime. It has a plethora of extension functions which can set rulesets, transform values, and return validation messages right out the box.

Let's take a look at an example of a Yup schema for our user form:‌

import * as Yup from 'yup';

// If using Typescript, you can utilise a wrapper function to enforce strict typing

const createYupSchema = <T extends object>(schema: Yup.ObjectSchema<T>): Yup.ObjectSchema<T> => schema;

export const userFormSchema = createYupSchema<UserInput>(
  Yup.object().shape({
    firstname: Yup.string().required('First name is required'),
    surname: Yup.string().required('Surname is required'),
    email: Yup.string().email('Invalid email format').required('Email is required'),
    dob: Yup.string().required('Date of Birth is required'),
  })
);

// JS Version
export const validationSchema = Yup.object({
  firstname: Yup.string().required('First name is required'),

  surname: Yup.string().required('Surname is required'),
  email: Yup.string().email('Invalid email format').required('Email is required'),
  dob: Yup.date().required('Date of Birth is required')
});

We're creating a Yup object (schema) which contains all of our Keys for our UserInput interface.

Schema Parts:

• key: the key which will be used later for the name of our element (as we're using TypeScript, this needs to match the object key name).
• ruleset: for all keys, apply a ruleset. A ruleset must start with a typing declaration, that is Yup.string() or Yup.number() and so on. You can then chain your other validation functions.

Using TypeScript ensures that we match the schema type to our interface types.

For example, if we try and do this:

firstname: Yup.date().required();

it will throw a TypeScript error complaining that firstname cannot be validated as if it was a date, as the type of firstname is a string.

How to Add Validation to a Form

This is where our Formik library comes in and makes things much easier than validating a form and implementing error handling manually.

Formik is a library which encapsulates a <Form/> component. It allows us to create richer forms in React and React Native, giving us access to features like form state, error handling, validation, and processing of form submissions much more efficiently.

You can access a pre-built version of a UserForm utilising Yup, Formik, and React (Vite) at my GitHub here. Simply clone the GitHub repository and follow the README.md instructions. ‌

<Formik
        initialValues={initialValues}
        validationSchema={userFormSchema}
        onSubmit={onSubmit}
      >
        {({ isValid, dirty, isSubmitting }) => (
          <Form>
            <div className="form-control">
              <label htmlFor="firstName">First Name</label>
              <Field type="text" id="firstName" name="firstName" />
              <ErrorMessage name="firstName" component="div" className="error" />
            </div>

            <div className="form-control">
              <label htmlFor="surname">Surname</label>
              <Field type="text" id="surname" name="surname" />
              <ErrorMessage name="surname" component="div" className="error" />
            </div>

            <div className="form-control">
              <label htmlFor="email">Email</label>
              <Field type="email" id="email" name="email" />
              <ErrorMessage name="email" component="div" className="error" />
            </div>

            <div className="form-control">
              <label htmlFor="dob">Date of Birth</label>
              <Field type="date" id="dob" name="dob" />
              <ErrorMessage name="dob" component="div" className="error" />
            </div>

            <button type="submit" disabled={isSubmitting || !isValid}>Submit</button>
          </Form>
        )}
      </Formik>

In this code, we've utilsed the <Formik/> library component, which wraps around our standard <Form/> element. We pass the following properties to the component:

• **initialValues** – these are the required initial values of your form (that is when the form renders what values your inputs will have).‌
• validationSchema – this is probably the most important for this tutorial. Bear in mind this is an optional property, as it's not needed to utilise the <Formik/> component, but for any validation it is. ‌
  ‌‌
  ‌We're going to import our userFormSchema we created in the previous step. This is going to tell the form, when validating inputs within this form utilise these schemas. ‌
• onSubmit – a straightforward function to run on clicking your button / submitting the form. The values of the form will automatically be passed to this function.‌

You can wrap the form within a "render prop" function also to utilise some of the exposed props from Formik within your form. You can learn about render props more here.

{({ isValid, isSubmitting }) => (

Note: This is not required if you don't want to utilise any of the underlying Formik properties within the form itself. You can simply remove and place your opening <Form> tag in its place. ‌
‌‌
‌But using this render prop allows you to access properties exposed from the Formik component within your <Form/> element. You can see that we are utilising theisValid and isSubmitting properties to control the state of our submit button.

Continuing on with analyzing the code:

• **isValid** – a boolean value which Formik controls based on our schema validation result.
• **isSubmitting** – A boolean flag indicating if a form is mid-submission. This flag is very useful when wanting to disable a button, to prevent multiple clicks meaning multiple submissions of the form.

We can use these values to control the enablement of the submit button like so:

<button type="submit" disabled={isSubmitting || !isValid}>Submit</button>

Input Fields

It's important to note that when using Formik and Yup, in order for the validation to work, the names of the input fields need to match the Yup schema keys exactly (case sensitive) – otherwise the validation rules won't be registered.

Example:‌

<Field type="email" id="email" name="email" />
<ErrorMessage name="email" component="div" className="error" />

We've defined this field is to be used for an email input, and given it the matching name of "email" to our a userFormSchema definition.

Underneath, we code our Formik <ErrorMessage/> component, again passing in the name of 'email', matching our schema. Using the name property we are able to link our input, error message, and validation schemas all together.

If there are any issues with validating the input field, the error message will show any defined error messages – otherwise it will fallback to a default message, e.g "firstname is a required field". This can be less user friendly, so I'd recommend always passing a custom message.

You'll also notice, that when we lose focus or when typing (after first validation has run), it will automatically run validation again. You can overwrite this functionality by setting the validateOnBlur and the validateOnChange flags (true / false).

As an example, it will look like this in its error state.:

Image: Invalid Formik form showing error state

‌Once we've entered values for all inputs, and our validation has passed (you can see the submit button is now enabled), we can submit.‌

Further Validation and Formik Features‌

You've now seen how easy Yup and Formik can make creating a form. It has full validation and even error handling, meaning you can have a fully functioning user friendly form built in just a few minutes.

But what if you want to add more complex validation to a much larger / complicated form? Well, let's look at an example:

Let's say we want to validate that the date of birth provided ensures that the user is over the age of 18. We will also add a password field, which will have rules of:

• minimum of 6 letters
• contain a number
• contain a special character

DoB Extra Requirements

We can do this by chaining the test() function onto the string() function of the dob object within our schema.

The test() function allows us to test against custom logic. Update the dob parameter within the userFormSchema to the following:‌

dob: Yup.string()
      .required('Date of Birth is required')
      .test('is-older-than-18', 'You must be at least 18 years old', (value) => {
        if (!value) return false;

        // try to parse the value to date
        const parsedDate = parse(value, 'yyyy-MM-dd', new Date());
        if (!isValid(parsedDate)) return false;

        const today = new Date();
        const eighteenYearsAgo = subYears(today, 18);

        // check if date provided is before or the same as 18 years ago.
        return parsedDate <= eighteenYearsAgo;
      })

We now get the following error when trying to submit a date that is less than 18 years ago. ‌

Image: Invalid input field due to failed date validation

Password Validation

For the password field validation, we can do something like this:‌

password: Yup.string()
    .required('This field is required')
    .min(6, 'Must be at least 6 characters')
    .matches(/[!@#$%^&*(),.?":{}|<>]/, 'Must contain at least one special character')
    .matches(/\d/, 'Must contain at least one number');

Here we use the matches() function, passing in a regular expression to assert against. You could combine these cases into one regular expression, but the benefit of keeping them separate is it allows you to pinpoint which validation rule is failing. It also allows for a more granular error message and maintenance should the rules change in the future.

Other Useful Methods:

• length() – asserts the length of the string / number
• positive() – asserts the number type is a positive number
• email() – asserts that it is a valid email address
• url() – asserts that it is a valid URL
• min() / max() – asserts that the number is at least 'x' and less than 'y'
• ensure() – transforms undefined and null values to an empty string along with setting the default to an empty string.

Conclusion

As you can see, the possibilities with Yup are vast. Then combine this with the Formik library, and you can have rich, efficient, and easy to use forms.

This ease of use makes it so much quicker to get a form up and running on your web or mobile application, allowing you to focus on user experience, design, and business logic.

As always feel free to reach and discuss this article with me on Twitter, and don't forget to drop me a follow to hear about future articles and dev tips.

This comprehensive guide covers various aspects of HTML forms, from how to create and structure forms to JavaScript interaction and form validation.

Understanding how to work with forms programmatically allows you to validate and capture user input, handle submissions, and enhance the overall user experience.

By following the examples and best practices provided in this guide, you'll be equipped with the knowledge necessary to build robust web forms that enhance user experience and facilitate seamless data collection and submission.

Whether you're a beginner or an experienced developer, this guide serves as a valuable resource for understanding and implementing HTML forms effectively in your web projects.

Prerequisites:

A basic understanding of JavaScript fundamentals is recommended to fully comprehend the concepts discussed in this tutorial. Familiarity with HTML forms will also be beneficial for understanding and applying the material covered.

If you're new to JavaScript, it's recommended to acquaint yourself with variables, data types, functions, loops, and basic DOM manipulation techniques before diving into this tutorial. This foundational knowledge will facilitate a smoother learning experience as we explore more advanced topics related to form handling in JavaScript.

Starting Note: For your convenience, all the examples and code discussed here can be accessed on GitHub.

Table of Contents

1. Understanding HTML Forms
   – Introduction to HTML form elements
   – JavaScript and Form Handling
   – Accessing Form Fields
   – Example: Registration Form
2. How to Create Radio Buttons
   – JavaScript to Handle Radio Button Selection
   – Radio Button Change Event
3. Checkboxes
   – How to Check if a Checkbox is Checked
   – How to Get Checkbox Values
   – How to Handle Multiple Checkboxes
   – How to Check / Uncheck All Checkboxes
   – How to Dynamically Generate CheckBoxes
4. Select Element
   – How to Interact with a Select Element
   – How to Access Options with JavaScript
   – How to Handle Multiple Selections
   – Example: Task Manager
5. Difference Between Change and Input Event
6. Conclusion

Before we start, here's something to note:

This is a follow up blog on this DOM and Events Handbook and not cover server-side communication/server-side form handling in this blog as it involves advanced topics such as AJAX (Asynchronous JavaScript and XML), Promises, error handling, and handling asynchronous operations in JavaScript.

In this tutorial, we'll instead focuses on how to work with various form elements including radio buttons, checkboxes, and select elements, as well as dynamically generating and interacting with them using JavaScript.

Delving into server-side communication would extend beyond the scope of this article, which aims to provide a comprehensive understanding of DOM manipulation and event handling within the context of form elements.

Understanding HTML Forms

HTML forms are fundamental elements used for collecting and submitting user data on the web. They enable interaction between users and websites by allowing users to input information, make selections, and submit data to servers for processing.

Introduction to HTML Form Elements

HTML forms are created using the <form> element, which acts as a container for various input elements. Common form elements include text fields, checkboxes, radio buttons, dropdown menus, and buttons.

To reference a form in JS, you can use DOM methods like getElementById() or document.forms. document.forms returns a collection of forms, and you can access a specific form using an index, name, or id.

const form = document.getElementById('signup');
const firstForm = document.forms[0]; // accessing first form
const formByName = document.forms['formName']; // accessing form by name
const formById = document.forms['formId']; // accessing form by id

Let's see a basic example of an HTML form:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

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

In this example, we have a form with two input fields for username and password, along with a submit button.

Form Structure and Attributes

HTML forms can have various attributes that control their behavior and appearance. Some common attributes include:

• action: Specifies the URL where the form data should be submitted.
• method: Specifies the HTTP method used to send form data (post or get).
• target: Specifies where to display the response after form submission (for example, _self, _blank, _parent, _top).
• name: Assigns a name to the form for identification purposes.

Here's an example of a form with action, method, and target attributes:

<form action="/submit-form" method="POST" name="myForm" target="_blank">
  <!-- Form elements go here -->
</form>

JavaScript and Form Handling

JavaScript uses the HTMLFormElement object to represent a form. This object has properties corresponding to the HTML attributes action and method.

Methods like submit() and reset() are used for submitting and resetting forms.

const form = document.getElementById('signup');
form.action; // returns the action attribute
form.method; // returns the method attribute
form.submit(); // submits the form

JavaScript provides Event Handlers to add interactivity to HTML forms. By leveraging these events, you can execute custom scripts in response to user actions within the form:

Submit Event: A form typically has a submit button, which when clicked, sends the form data to the server. This is achieved using an <input> or <button> element with type="submit".

<input type="submit" value="Sign Up">
// or
<button type="submit">Sign Up</button>

To attach an event listener to the submit event, you use the addEventListener() method. Here's an example:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    // Custom validation and submission logic here
});

In many cases, you may want to intercept the default form submission behavior and execute custom logic before allowing the form to be submitted to the server. You can use preventDefault() for this. Example:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevents the default form submission
    // Custom validation and submission logic here
});

Without event.preventDefault(), any custom validation and submission logic would still execute within the event listener, but the default form submission behavior would not be prevented.

Reset Event: The reset event is triggered when the form is reset using a reset button or programmatically. We use reset() method to clear all form fields and reset them to their default values.

document.querySelector('form').addEventListener('reset', function(event) {
    // Custom form reset logic here
});

How to Access Form Fields

You can access form fields using DOM methods like getElementsByName(), getElementById(), querySelector(), and so on

The form.elements property stores a collection of form elements. You can access these Elements by index, id, or name. Here's an example:

const form = document.getElementById('signup');
const nameField = form.elements['name']; // accessing element by name
const emailField = form.elements['email']; // accessing element by name
const firstElement = form.elements[0]; // accessing first element by index no.

Once you've accessed a form field, you can use the value property to access its value. Here's an example:

const nameValue = nameField.value;
const emailValue = emailFieldByName.value;

Form Validation

Form validation is an essential aspect of web development that ensures the data submitted by users is accurate and meets specified criteria before being processed by the server. Common validations include checking for empty fields, valid email formats, and so on.

HTML Form Validation

HTML5 provides built-in form validation through various attributes:

• required: Specifies that a field must be filled out.
• pattern: Specifies a regular expression pattern that the input value must match.
• min and max: Specify the minimum and maximum values for an input field.
• maxlength and minlength: Specify the maximum and minimum length of the input
• type: Specifies the type of input expected (for example, email, number, date).

Here's an example of HTML form validation using these attributes:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="15"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="99"><br>

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

JavaScript Form Validation

JavaScript allows developers to perform more sophisticated validation logic beyond what HTML attributes offer. Event listeners can be attached to form elements to handle validation dynamically.

Here's a basic example of JavaScript form validation:

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Perform custom validation logic
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (!emailIsValid(email)) {
        alert('Please enter a valid email address.');
        return;
    }

    if (password.length < 6) {
        alert('Password must be at least 6 characters long.');
        return;
    }

    // If validation passes, submit the form
    form.submit();
});

function emailIsValid(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

In this example, the JavaScript function emailIsValid() uses a regular expression to validate the email format. The submit event listener prevents the form from being submitted if the validation fails, and custom error messages are displayed to the user.

Let's See an Example: Registration Form

Now, let's combine all the concepts we've covered into a complete example of a Registration form with client-side validation using JavaScript:

<!DOCTYPE html>
<html>
  <body>
    <h2>User Registration</h2>
    <form id="registrationForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Register" />
      </div>
    </form>

    <div id="errorMessages"></div>
    <script src="script.js"></script>
  </body>
</html>

HTML Structure: We have a simple registration form with fields for username, email, password, and a submit button. There's also a container div (errorMessages) to display validation error messages.

Now let's write JavaScript code to handle form submission and perform client-side validation:

const registrationForm = document.getElementById("registrationForm");
const errorMessages = document.getElementById("errorMessages");

registrationForm.addEventListener("submit", function (event) {
  event.preventDefault();

  const { username, email, password } = registrationForm.elements;

  errorMessages.innerHTML = "";

  if (!username.value.trim()) {
    displayError("Username is required.");
    return;
  }

  if (!email.value.trim() || !isValidEmail(email.value)) {
    displayError("Please enter a valid email address.");
    return;
  }

  if (!password.value.trim() || !isStrongPassword(password.value)) {
    displayError(
      "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character."
    );
    return;
  }

  alert("Registration successful!");
  registrationForm.reset();
});

function displayError(message) {
  errorMessages.innerHTML += `<div class="error">${message}</div>`;
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isStrongPassword(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/.test(password);
}

JavaScript Handling: We select the form and the error message container using getElementById. We attach an event listener to the form's submit event. When the form is submitted, we prevent its default behavior using event.preventDefault() to handle form submission manually.

Form Validation: We retrieve the values of username, email, and password.

We perform basic validation: Username must not be empty, Email must be in a valid format, Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character.

Error Handling: If any validation fails, we display the corresponding error message. Error messages are displayed in the errorMessages div.

Form Reset: Upon successful registration (in this case, a simple alert), we reset the form using registrationForm.reset()

Currently, the code uses an alert to indicate successful registration. In a real scenario, you might want to implement an AJAX call to submit the data to a server for processing and handle the response accordingly But that's not what we're going to discuss, as mentioned at the start of this tutorial.

Overall this example covers form creation, form handling with JavaScript, form validation using regular expressions, and dynamic custom error message display, demonstrating a basic user registration form with client-side validation.

Radio Buttons

Radio buttons are a common form element used to select one option from a set of options. In JavaScript, you can manipulate radio buttons to retrieve user selections and perform actions based on those selections.

How to Create Radio Buttons

You can use radio buttons you want users to select only one option from a set of choices. In HTML, you can create radio buttons using the <input> element with the type attribute set to "radio". A group of radio buttons with the same name attribute forms a radio group.

Here's an example:

<!DOCTYPE html>
<html>
  <body>
    <form id="languageForm">
      <p>Select your favorite programming language:</p>
      <div>
        <input type="radio" name="language" value="JavaScript" id="js" />
        <label for="js">JavaScript</label>
      </div>
      <div>
        <input type="radio" name="language" value="Python" id="python" />
        <label for="python">Python</label>
      </div>
      <div>
        <input type="radio" name="language" value="Java" id="java" />
        <label for="java">Java</label>
      </div>
      <!-- More language options can be added here -->
    </form>
  </body>
</html>

You use the id and for attributes for accessibility, linking the label to the corresponding radio button.

How to Retreive the Selected Radio Button Value

Now, let's discuss how to retrieve the value of the selected radio button using JavaScript.

    <!-- HTML -->
    <button id="btn">Show Selected Language</button>
    <p id="output"></p>

    <script>
      const btn = document.querySelector("#btn");
      const radioButtons = document.querySelectorAll('input[name="language"]');
      const output = document.getElementById("output");

      btn.addEventListener("click", () => {
        let selectedLanguage;
        for (const radioButton of radioButtons) {
          if (radioButton.checked) {
            selectedLanguage = radioButton.value;
            break;
          }
        }
        // Displaying the output:
        output.innerText = selectedLanguage
          ? `You selected ${selectedLanguage}`
          : `You haven't selected any language`;
      });
    </script>

Here's how this the code works: the JavaScript code initializes by selecting the button, radio buttons, and output elements from the HTML document. We add a click event listener to the button element. When the button is clicked, the function inside the event listener is executed.

Inside the click event listener, we iterate over all radio buttons in the radioButtons collection. We check if a radio button is checked using its checked property. If a radio button is checked, we assign its value to the selectedLanguage variable and exit the loop using break.

We update the content of the output element (<p> tag with id output) based on whether a language is selected. If a language is selected (selectedLanguage is truthy), we display a message indicating the selected language. Otherwise, we prompt the user to select a language.

Radio Button Change Event

When a radio button is checked or unchecked, it fires a change event. You can listen to this event using addEventListener(). Inside the event handler, you can access the checked state and value of the radio button using this.checked and this.value.

radioButton.addEventListener('change', function (e) {
  if (this.checked) {
    console.log(this.value);
  }
});

How to Dynamically Generate Radio Buttons

Now, let's explore how to dynamically generate radio buttons using JavaScript. This is useful when you want to create radio button options dynamically based on certain criteria or data.

Suppose we have an array of languages, and we want to dynamically generate radio buttons for each language option:

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the radio buttons
      const languages = document.querySelector("#languages");
      languages.innerHTML = languageOptions.map((language) => `
          <div>
              <input type="radio" name="language" value="${language}" id="${language}">
              <label for="${language}">${language}</label>
          </div>`).join(' ');
    </script>
  </body>
</html>

It dynamically generates radio buttons based on the languageOptions array and inserts them into the container element (<div id="languages"></div>). Each radio button has a unique ID and value corresponding to the language name, and the labels are associated with their respective radio buttons using the for attribute.

After dynamically generating the radio buttons, Now let's add change event listeners to them to handle changes in selection.

    <!-- HTML -->
    <div id="languages"></div>
    <div id="languageOutput"></div> // we create this one to fetch our selected language output

    <!-- Generate the radio buttons -->

// Attaching Change Event Listeners
const radioButtons = document.querySelectorAll('input[name="language"]');
for (const radioButton of radioButtons) {
    radioButton.addEventListener('change', showSelectedlanguage);
}        

// Handling the Change Event
function showSelectedlanguage() {
    if (this.checked) {
        document.querySelector('#languageOutput').innerText = `You selected ${this.value}`;
    }
}

Here's what's happening:

• We select all radio buttons with the name attribute set to "language".
• We use a for...of loop to iterate over each radio button and add a change event listener to each radio button. This listener listens for changes in the state of the radio buttons, i.e., when a radio button is selected or deselected.
• We define a function named showSelectedLanguage to handle the change event triggered by selecting a radio button.
• Inside the showSelectedLanguage function, we first check if the current radio button (this) is checked using the checked property. If the radio button is checked, we update the text content of an element with the id languageOutput using document.querySelector('#languageOutput'). This element serves as a placeholder to display the selected language.

This setup ensures that dynamically generated radio buttons have change event listeners attached to them, allowing for dynamic handling of user selections.

Checkboxes

How to Create an HTML Checkbox

Let's first create a checkbox using the <input> element and type attribute set to "checkbox". let's associate it with label for better accessibility.

<label for="agree">
   <input type="checkbox" id="agree" name="agree" value="yes"> I agree to the terms
</label>

How to Check if a Checkbox is Checked

A checkbox in HTML can exist in two states: checked and unchecked. And we can determine which is active using checked property. If it's true, the checkbox is checked – otherwise, it's unchecked. Example:

<!DOCTYPE html>
<html>
<body>
    <label for="agree">
        <input type="checkbox" id="agree" name="agree"> I agree to the terms
    </label>

    <script>
        const checkbox = document.getElementById('agree');
        console.log(checkbox.checked);
    </script>
</body>
</html>

How to Get Checkbox Values

In HTML forms, when a checkbox is checked and the form is submitted, the browser includes the checkbox in the form data with its name attribute as the key and the value attribute (if specified) as the value. But if the checkbox is unchecked, it's not included in the form data at all.

<label for="agree">
    <input type="checkbox" id="agree" name="agree"> I agree to the terms
</label>

<button id="btn">Show Value</button>
<script>
    const checkbox = document.querySelector('#agree');
    const btn = document.querySelector('#btn');
    btn.onclick = () => {
       alert(checkbox.value);
    };
</script>

So basically the point is: When a checkbox is checked and included in form submissions, the browser defaults to sending 'on' as the value if no value attribute is explicitly defined for the checkbox input element. To accurately handle the checked state of a checkbox using JavaScript, use the checked property instead of relying solely on the value attribute.

How to Handle Multiple Checkboxes

Sometimes, you may need to work with multiple checkboxes with the same name and you want to retrieve the values of the selected checkboxes. Here's an example:

<!DOCTYPE html>
<html>
  <body>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <p>
      <button id="btn">Get Selected Languages</button>
    </p>

    <script>
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", () => {
        const checkboxes = document.querySelectorAll(
          'input[name="language"]:checked'
        );
        const selectedLanguages = Array.from(checkboxes).map(
          (checkbox) => checkbox.value
        );
        alert("Selected Languages: " + selectedLanguages.join(", "));
      });
    </script>
  </body>
</html>

In this example, we have checkboxes for selecting preferred programming languages.

• When the button is clicked, it triggers an event listener. Inside the event listener, we select all checkboxes with the name attribute "language" that are checked.
• We then convert the NodeList returned by querySelectorAll() into an array using Array.from().
• Finally, we map over the array to retrieve the values of selected checkboxes and display them using alert().

How to Check / Uncheck All Checkboxes

Now, let's create a functionality to check or uncheck all checkboxes at once:

<!DOCTYPE html>
<html>
  <body>
    <p>
      <button id="btn">Check / Uncheck All</button>
    </p>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <script src="script.js"></script>
  </body>
</html>

Javascript code:

// function to check or uncheck all checkboxes
function check(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');

  // Iterate through each checkbox
  checkboxes.forEach((checkbox) => {
    // Set the checked property of each checkbox to the value of the 'checked' parameter
    checkbox.checked = checked;
  });
}

// function to check all checkboxes and change button behavior to uncheck all
function checkAll() {
  check();
  this.onclick = uncheckAll;
}

// function to uncheck all checkboxes and change button behavior to check all
function uncheckAll() {
  check(false);
  this.onclick = checkAll;
}

const btn = document.querySelector("#btn");

btn.onclick = checkAll;

In this example, we have a button labeled "Check / Uncheck All".

• When the button is first clicked, it's intended to check all the checkboxes. Therefore, the checkAll function is assigned to handle this action (const btn = document.querySelector("#btn");).
• If the button is clicked again, it unchecks all checkboxes. We define functions check(), checkAll(), and uncheckAll() to handle the checking and unchecking of checkboxes.
• We assign checkAll() to the button's onclick event initially, and then switch between checkAll() and uncheckAll() based on the current state of the checkboxes.

Alternate approach could be:

function checkAll(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  // Find the first checkbox with the name attribute set to 'language'
  const firstCheckbox = document.querySelector('input[name="language"]');
  // Check if the first checkbox is checked
  const isChecked = firstCheckbox.checked;
  // Call the checkAll function with the opposite state of the first checkbox
  checkAll(!isChecked);
});

Here, we select the first checkbox with the name "language" to determine its current checked state. Then, we call checkAll() with the opposite state.

How to Dynamically Generate CheckBoxes

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the checkboxes
      const html = languageOptions
        .map(
          (language) => `<label for="language-${language}">
                <input type="checkbox" name="language" id="language-${language}" value="${language}"> ${language}
            </label>`
        )
        .join(" ");
      document.querySelector("#languages").innerHTML = html;
    </script>
  </body>
</html>

Here's how it works:

• We define an array languageOptions containing language names.
• We use the map() method to iterate through the languageOptions array and generate an array of HTML strings for each language.
• Each HTML string comprises a label element associated with an input checkbox. The input checkbox includes appropriate attributes such as type, name, id, and value, dynamically derived from the language name.
• We join the array of HTML strings into a single string using join(' ').
• Finally, we set the innerHTML property of the root <div> element with the id languages to the generated HTML string, thereby rendering checkboxes for each programming language.

Select Element:

The <select> element in HTML provides a dropdown list of options for users to choose from. It allows for single or multiple selections. Example:

<select id="cities">
    <option value="JAI">Jaipur</option>
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option value="MUM">Mumbai</option>
</select>

By default, a <select> element allows for a single selection. To enable multiple selections, add the multiple attribute.

<select id="cities" multiple>

Users can now select multiple fruits by holding down the Ctrl (or Cmd on Mac) key while clicking.

How to Interact with a Select Element:

To interact with a <select> element using JavaScript, we use the HTMLSelectElement type, which provides useful properties like selectedIndex and value. Example:

<script>
const selectElement = document.getElementById('cities');
console.log(selectElement.selectedIndex); // Returns the index of the selected option
console.log(selectElement.value); // Returns the value of the selected option
console.log(selectElement.multiple); // Returns true if multiple selections are allowed
</script>

JavaScript allows you to handle events on the <select> element, such as when a user selects an option. Example:

<button id="btn">Get Selected City</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.getElementById("cities");
      btn.onclick = (event) => {
        event.preventDefault();
        const selectedCity =
          selectElement.options[selectElement.selectedIndex].text;
        alert(`Selected city: ${selectedCity}, 
        Index: ${selectElement.selectedIndex}`);
      };
    </script>

Using the value property: The value property represents the value of the selected option. Let's understand it with example:

<select id="cities">
    <option value="">Jaipur</option> 
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option>Mumbai</option>
</select>

const btn = document.querySelector("#btn");
const selectElement = document.querySelector("#cities");

btn.onclick = (event) => {
    event.preventDefault();
    alert(selectElement.value);
};

• If "Jaipur" is selected, this means we have an empty string since the value attribute is empty in our Html.
• If an option lacks a value attribute, the select box's value property becomes the text of the selected option. Example: if "Mumbai" is selected, the value property is "Mumbai".
• If multiple options are selected, the value property of the select box is derived from the first selected option based on the previous rules.

How to Access Options with JavaScript

The HTMLOptionElement type represents individual <option> elements within a <select> element in JavaScript. It provides properties like index, selected, text, and value to access information about each option.

const selectElement = document.getElementById('cities');
const secondOptionText = selectElement.options[1].text; // Accessing text of the second option
const secondOptionValue = selectElement.options[1].value; // Accessing value of the second option

How to Handle Multiple Selections:

When a <select> element allows multiple selections, you can iterate through its options to find which ones are selected and retrieve their text values.

const selectElement = document.getElementById('cities');
const selectedOptions = Array.from(selectElement.options).filter(option => option.selected);
const selectedValues = selectedOptions.map(option => option.text);

The output will be an array containing text of selected options. We can use option.value to get an array of values instead. Example:

<!DOCTYPE html>
<html>
  <body>
    <select id="cities" multiple>
      <option value="JAI">Jaipur</option>
      <option value="DEL">New Delhi</option>
      <option value="UDR">Udaipur</option>
      <option value="MUM">Mumbai</option>
    </select>

    <button id="btn">Get Selected Cities</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.querySelector("#cities");

      btn.onclick = (event) => {
        event.preventDefault();
        const selectedOptions = Array.from(selectElement.options)
          .filter((option) => option.selected)
          .map((option) => option.text);
        alert("Selected City: " + selectedOptions.join(", "));
      };
    </script>
  </body>
</html>

• When the button is clicked, the script collects the selected options by filtering the options based on the selected property. It then maps over the selected options to retrieve their text content.
• Finally, it displays the selected languages in an alert message.

Let's See an Example: Task Manager (Adding and Removing Tasks)

<!DOCTYPE html>
<html>
  <style>
    #container {
      max-width: 540px;
      margin: 50px auto;
    }

    form {
      display: flex;
      flex-direction: column;
    }
  </style>
  <body>
    <div id="container">
      <form>
        <label for="task">Task:</label>
        <input
          type="text"
          id="task"
          placeholder="Enter a task"
          autocomplete="off"
        />

        <button id="btnAdd">Add Task</button>

        <label for="taskList">Task List:</label>
        <select id="taskList" name="taskList" multiple></select>

        <button id="btnRemove">Remove Selected Tasks</button>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

This HTML structure includes input fields for entering task descriptions, buttons for adding and removing tasks, and a <select> element to display the list of tasks. We added a little css for clarity. Let's see Javascript code now:

const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const taskList = document.querySelector('#taskList');
const taskInput = document.querySelector('#task');

btnAdd.onclick = (e) => {
    e.preventDefault();

    // Validate the task input
    if (taskInput.value.trim() === '') {
        alert('Please enter a task description.');
        return;
    }

    // Create a new task option
    const option = new Option(taskInput.value, taskInput.value);
    taskList.add(option, undefined);

    // Reset the task input
    taskInput.value = '';
    taskInput.focus();
};

btnRemove.onclick = (e) => {
    e.preventDefault();

    // Save the selected tasks
    let selectedTasks = [];

    for (let i = 0; i < taskList.options.length; i++) {
        selectedTasks[i] = taskList.options[i].selected;
    }

    // Remove selected tasks
    let index = taskList.options.length;
    while (index--) {
        if (selectedTasks[index]) {
            taskList.remove(index);
        }
    }
};

Explaination: we select the necessary elements from the HTML and attach event listeners to the "Add Task" and "Remove Selected Tasks" buttons. When the "Add Task" button is clicked, we create a new task option based on the input field value and add it to the <select> element. When the "Remove Selected Tasks" button is clicked, we remove the selected tasks from the <select> element.

Difference Between Change and Input Event

The input event in JavaScript is triggered whenever the value of an input, <select>, or <textarea> element changes. Unlike the change event, which waits for a value to be committed (for example, when an input loses focus), the input event fires continuously as the value changes. The input event basically provides a way to respond to user input in real-time. Example:

<!DOCTYPE html>
<html>
<body>
    <label for="userInput">Enter Your Name:</label>
    <input type="text" id="userInput" placeholder="Your name">
    <p>Your name is: <span id="displayName"></span></p>
</body>
</html>

<script>
    const userInput = document.getElementById('userInput');
    const Name = document.getElementById('displayName');

    userInput.addEventListener('input', function() {
        Name.textContent = userInput.value || 'Guest!';
    });
</script>

• This JavaScript code selects the input field with the ID "userInput" and the span element with the ID "displayName".
• An event listener is attached to the input event of the userInput field.
• When the input event is triggered (for example, when typing in the input field), the event handler updates the text content of the displayName span dynamically to reflect the entered name, or it displays "Anonymous" if the input field is empty.
• Now, if you change 'input' to 'change' here userInput.addEventListener('input', function() like this: userInput.addEventListener('change', function(), the event listener will be triggered only when the input field loses focus after a value has been entered (as opposed to continuously while the value is being changed in real-time).

Conclusion

By understanding the fundamentals of HTML form elements, attributes, and events, you can create dynamic and user-friendly web forms that enhance the user experience.

JavaScript plays a crucial role in handling form submissions, validating user input, and providing real-time feedback to users.

Through practical examples and detailed explanations, in this guide you've learned about working with radio buttons, checkboxes, select elements, and handling multiple selections.

Keep exploring and experimenting with the concepts presented here to create robust and intuitive forms for your web applications.

HTML forms are used to get information from users. They are widely used in webpages or apps for surveys or registration processes.

HTML form basics include the common HTML elements, tags, attributes, concepts, or best practices required for you to create good HTML forms. The collected data is sent to a server for processing.

• Basic Structure of HTML Form
• How to Use HTML Form Elements
• How to Use the HTML Element
• How to Use the HTML Element
• How to Use the HTML
• How to Use the HTML Element
• Form Validation
• Importance of Form Validation
• Types of Form Validation
• Common Validation Techniques
• Form Submission and Methods
• How to Style HTML Forms
• Best Practices and Accessibility
• Conclusion

Basic Structure of HTML Form

You can use the <form> element to create an HTML form

<form action="submit_form" method=" post">
  <label for="name">Name:</label>
  <input type="text" id="name" name=" name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

The HTML <form> element is a container for several HTML form elements. The <form> element can contain the following:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

How to Use HTML Form Elements

In this section, you'll learn how to use some of the HTML form elements.

How to Use the HTML Element

The <input> element is the most commonly used form element. The type of information an <input> element can hold depends on the <type> attribute.

The <input> element can only accept a particular type of data assigned to it using the <type> attribute.

<form action="">
      <input
        type="text"
        id="name"
        name="username"
        placeholder="Enter your username"
        required
      />
      <input
        type="password"
        id="security"
        name="password"
        placeholder="Enter your password"
        required
      />
      <input type="email" name="email" placeholder="Enter your email" />
      <input type="checkbox" name="subscribe" value="yes" /> Subscribe to the
      newsletter <input type="radio" name="gender" value="male" /> Male
      <input type="radio" name="gender" value="female" /> Female
      <input type="submit" name="submit" />
</form>

The following are the different <type> attributes that can be assigned to an <input> element:

• <input type="text">: Allows the user to type in text.
• <input type="email">: The user input must follow an email format.
• <input type="password"> : Accepts password from the user. The passwords are masked, usually displayed as asterisks (*) or dots, to protect the privacy of the input.
• <input type="checkbox">: The user can select none or many of the displayed checkboxes. Checkboxes can be checked or unchecked.
• <input type="radio">: Allows the user to select only one from the multiple-choice radio buttons.
• <input type="submit">: Enables the user to submit the form.

The following are other possible attributes found in the input element:

• <input name=" "> : Assigns the input field a name. The assigned name identifies the input data when the form is submitted.
• <input id=" ">: The identifier creates a unique id for the input field. It is usually associated with CSS for styling and JavaScript for other manipulations.
• <input value=" ">: Used to set the initial value for the input field. The default initial value gives the user an idea of the information required.
• <input placeholder=" ">: A faint pseudo value set to the input field that disappears once the user starts typing. Gives a hint on what data to enter, similar to the value attribute.
• <input required>: Requires that the input field must be filled out before submission. Gives an error message when not filled out.
• <input disabled>: As the name implies, this prevents the user from interacting with the input field. Disables the input field from accepting input. With this attribute, the input field becomes unclickable.
• <input readonly>: The user can only read the initially set value but can't change it. Unlike the disabled attribute, the input field is clickable but can't be modified.

Note that the <input> element doesn't contain a for attribute.

How to Use the HTML Element

The label element associates text with a form input, checkbox, or radio button.

<form action=" ">
    <label for="name" id="user">Username:</label>
</form>

The label element describes the information required in the text field.

The label element is important for accessibility, this makes it easier for screen-reader users to navigate the form. The assistive technologies read the label loud to users.

Clicking on the label focuses the corresponding input field when the for attribute of the label element corresponds with the id attribute of the input element, making it more convenient for users to interact with the form.

Label improves the overall usage of the form, providing context and guidance.

The following are the commonly used attributes for the label element:

• <label for=" "></label>: Associates the label with the corresponding form element, usually an input element. The value of the for attribute is always the same as the id value of the associated form element, usually the input element.
• id attribute <label id=" "></label>: Gives the label a unique identifier. The value is set to the same value with the for attribute of the corresponding form element, usually an input element. Used for selecting the label for styling in CSS or other manipulations in JavaScript.

How to Use the HTML

A multi-line text input field, allows users to write longer text or paragraphs. The rows and cols attributes control the initial size of the textarea box.

<form action="">
      <label for="testimony">Testimony:</label>
      <textarea name="testimony" id="testimony" cols="30" rows="10"></textarea>
</form>

The rows attribute controls the height (vertical size) of the textarea box, determining the number of visible lines while the cols attribute controls the width (horizontal size), specifying the number of visible characters per line.

Note, that the textarea box can wrap to fit the entered text within its defined width.

Unlike the single-line input field, the textarea element does not have a maxlength attribute or value attribute. The content is placed within the opening and closing tags.

For accessibility, it's a good practice to associate label or context with the textarea element to assist users who use screen-readers or other assistive technologies.

How to Use the HTML Element

The <select> element creates a drop-down list, that allows users to select one or multiple options from the listed choices.

<form action="">
      <label for="numbers">Choose a favorite number:</label>
      <select name="numbers" id="numbers" size="5" multiple>
        <option value="" disabled selected>Select a number</option>
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
        <option value="four">4</option>
        <option value="five">5</option>
        <option value="six">6</option>
        <option value="seven">7</option>
        <option value="eight">8</option>
        <option value="nine">9</option>
        <option value="ten">10</option>
      </select>
</form>

The <option> element is contained within the <select> element. The <option> element holds the items to be selected. Each <option> represents one item in the drop-down list.

Each <option> element is expected to have a <value=" "> attribute, which holds the value to be submitted when the form containing the <select> element is submitted. If the <value=" "> attribute is omitted, the text content of the <option> element becomes the value to be submitted instead.

The <name=" "> attribute identifies the select control on the server side when the form is submitted. The <name=" "> is important for processing the form data on the server.

You can select one of the options as the default selection by including the <selected> attribute in the <option> element. If no option is selected, then the first option in the list will be selected by default.

The <size=" "> attribute sets the number of options you can see at once in the drop-down by setting the <size=" "> attribute on the <select>. Note that other options are seen as you scroll down.

Including the <disabled> attribute on the <select> element, disables the select option and prevents the users from selecting any option. The select option becomes unclickable.

Also, multiple options can be selected by including <multiple> attribute on the <select> element. You can hold the Ctrl (or Command on Mac) key to select multiple options.

Understanding the <select> element and using the necessary attributes can make your form convenient for users to select different options and for easy processing of the <select> element on the server side.

Form Validation

Simply put, this is the process of checking whether the data entered in the form is correct, complete, and meets the specified format.

Importance of Form Validation

• Data Accuracy: Prevents submission of incorrect or incomplete data.
• Security: Checks the data to prevent incorrect or malicious data from being submitted, thereby reducing harmful attacks or data breaches.
• User Experience: Makes filling out the forms less stressful by giving a quick error message if the user is entering the wrong data. Also, it can be used to suggest the expected format.
• Efficiency: Form validation before submission saves time and resources. Reduces unnecessary requests to the server, improving the overall performance of your application.

Types of Form Validation

1. Client-Side Validation: The user's browser performs the checks before submission. How does the browser validate forms? Browsers use JavaScript, CSS, or HTML attributes to validate forms. The advantage of client-side validation is the quick error message the user receives when data is incorrect or incomplete. The response is quick and doesn't require validation from the server side. One of the disadvantages is that client-side validation can be bypassed by an experienced user.
2. Server-Side Validation: The server checks the form data after submission. Server-side validation is more robust and secure. Performs double verification, and validates form data again, even if the client-side validation fails or is bypassed. The server-side validation is commonly done by using scripting languages like PHP or ASP.NET.

Note that you can use either of the two or a combination of both.

Common Validation Techniques

These are common HTML attributes that help you decide the pattern of form validation.

Length Limits

You can use the maxlength attribute to set the maximum number of characters an input field can hold.

<form>
  <input type="text" id="username" name="username" placeholder="Username" maxlength="20" required>
  <button type="submit">Submit</button>
</form>

Required Fields

Requires that certain input fields are filled before the form is submitted. The <required> attribute is used to perform this technique. An error message is displayed when the required field is not filled by the user.

<form>
  <input type="text" id="username" name="username" placeholder="Username" required>
  <input type="email" id="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

Data Format

Ensures the data entered by the user follows the required format. The <input type="email"> type attribute set to email will require the user to enter the correct email format (for example: me@example.com) before form submission.

The same thing happens if the type attribute is set to number <input type="number">, the user can only put data from 0-9.

<form>
  <input type="email" id="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

Password Strength

The <pattern=""> attribute is used to specify password complexity such as minimum length, and the inclusion of uppercase or lowercase letters, numbers, and special characters.

The <title=""> attribute displays the error message when the user hovers over the input field or when the entered password does not match the specified password format. The higher the password complexity, the higher the user account is protected from unauthorized access.

<form>
  <input type="password" id="password" name="password" placeholder="Password" pattern="(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}" title="Password must contain at least one number, one uppercase letter, one lowercase letter, and at least 8 or more characters" required>
  <button type="submit">Submit</button>
</form>

Numeric values

You can set the range of numeric values to be entered by the user by using the min and max attributes. For example, to check if a user is within the specified age range:

<form>
  <input type="number" id="age" name="age" placeholder="Age" min="18" max="100" required>
  <button type="submit">Submit</button>
</form>

Having a good form validation practice helps to create forms with accurate data and reduces vulnerability to malicious attacks.

Form Submission and Methods

When the submit button is clicked after filling out a form, your information is sent to the server for processing. This is called form submission.

Methods of Form Submission

Form data is sent to the server using the method attribute. There are two commonly used methods:

GET Method

With the get method <method="get">, the form data is sent using the URL in the browser's address bar to the server.

<form action="http://example.com" method="get">
          <input type="text" name="name" />
          <input type="submit" value="Submit" />
 </form>

Using the above code sample, when the user enters a name (let's say the user's name is KC) in the input field named ''name'', and clicks the submit button, the form data will be sent to the server in the URL like this: "http://example.com?name=KC".

The GET method is not safe, as it is commonly used for sending small amounts of data that is not sensitive.

POST Method

The post method attribute <method=post> sends the form data in the body of the HTTP request to the server, rather than in the URL.

<form action="http://example.com" method="get">
          <input type="text" name="name" />
          <input type="submit" value="Submit" />
 </form>

Using the same code sample above, the POST method will send the form data to the server like this: "https://example.com/submit.php".

You'd should notice that the POST request does not contain the form data in the URL but rather points to the server-side script (submit.php) that will process the form data.

The sent form data is not visible. The POST request is used to submit sensitive information, like passwords, since the data is not visible in the URL, but rather sent in the HTTP body request.

How to Style HTML Forms

HTML forms can be styled using CSS, just like any other HTML element. You can do the following with CSS to match the design of your website:

• Selectors: CSS selectors such as element selectors, class selectors, or ID selectors can be used to select specific elements in the HTML code for styling.
• Typography: Typography can be used to set the font-family, adjust the size, font-weight, and color of the text within the form element to enhance readability.
• Box Model: With the knowledge of CSS properties like padding, border, and margin, which affect the spacing and layout, you can style HTML elements.
• Colors and Backgrounds: The color of your text or background can be styled using the CSS properties like color and background-color (or background-image) respectively.
• Responsiveness: With media queries, you can make your form responsive and adapt to different screen sizes and devices.
• Layout: You can control the layout of a form to make it user-friendly with CSS properties like display, float, and positioning.

Best Practices and Accessibility

Like every other HTML document, ensure your form complies with web standards and is accessible to people with disabilities. For best practices and accessibility, take note of the following:

Structures and Semantics

• Always use proper semantic HTML elements (like <form>, <input>, <label>, and so on) to structure not just forms but every other HTML document.
• Nest elements properly and associate labels to their respective input field.
• Make sure your input fields have the appropriate type attributes.

Error Handling and Validation

• Combine both client-side and server-side validation to avoid incorrect or incomplete data submission.
• Use the appropriate attribute to display error messages when form submission fails or validation errors occur.

Responsive Design

• Your forms should be responsive and adapt to various screen sizes and devices.
• Use CSS media queries to adjust your form layouts and styles based on the viewport size.

Design and Contrast

• Use fonts and colors that are easy to see.
• The color contrast between text and background should ensure readability, especially for users with low vision.

ARIA Roles and Attributes

• ARIA (Accessible Rich Internet Application) roles and attributes improve accessibility for screen-reader users or other assistive technologies.
• ARIA attributes ( aria-labelledby, aria-describedby, and aria-invalid) provide additional context and feedback for form elements.

Conclusion

Creating good HTML forms that meet web standards improve user interaction and experience on your website. By following the best practices and accessibility, developers can create forms that are user-friendly, and effective in collecting data from users.

You can learn more about HTML forms and responsive web design using freeCodeCamp's Responsive Web Design Certification

This is where Zod and React-Hook-Form come in as a dynamic duo, ready to take your forms to the next level.

Zod is a validation library that provides a concise and expressive syntax for defining data schemas, making it an excellent choice for validating form data.

On the other hand, React-Hook-Form is a lightweight form library for React that embraces uncontrolled components and simplifies form-building with its intuitive hooks-based API.

In this tutorial, you will learn how to build a type-safe form using React-Hook-Form for form management and Zod for both client-side and server-side validation.

Here's what we'll cover:

1. Getting Started
2. How to Define Form Types
3. How to Create a Form with react-hook-form
4. How to Integrate Zod for Schema Validation
5. How to Handle Server-Side Errors
6. Conclusion

Getting Started

To get started, clone the starter boilerplate for the project. Open up your terminal and run this command:

git clone --branch starter https://github.com/Giftea/zod-rhf-fcc.git

You can find the final version on GitHub here.

Once you've got the boilerplate on your local machine, run the following commands to install dependencies and start the project:

npm install
npm run dev

Point your browser to http://localhost:3000, and you'll be greeted by the starting page of our project.

localhost

How to Define Form Types

The /types.ts file will contain the types and schemas related to our form fields and their validation. Update the /types.ts file with the code below:

import { FieldError, UseFormRegister } from "react-hook-form";

export type FormData = {
    email: string;
    githubUrl: string;
    yearsOfExperience: number;
    password: string;
    confirmPassword: string;
  };

  export type FormFieldProps = {
    type: string;
    placeholder: string;
    name: ValidFieldNames;
    register: UseFormRegister<FormData>;
    error: FieldError | undefined;
    valueAsNumber?: boolean;
  };


  export type ValidFieldNames =
  | "email"
  | "githubUrl"
  | "yearsOfExperience"
  | "password"
  | "confirmPassword";

FormData represents the structure of the data expected in the form.

FormFieldProps defines the properties expected by the form field component (which we will build later on). It includes:

• type: The type of the input field (for example, text, password).
• placeholder: Placeholder text for the input field.
• name: The name of the field, which corresponds to one of the valid field names defined in the ValidFieldNames type.
• register: A function from react-hook-form (UseFormRegister<FormData>) used to register the input field with the form.
• error: Represents any validation error associated with the field. It can be undefined if there are no errors.
• valueAsNumber (optional): A boolean flag indicating whether the field value should be treated as a number. Defaults to undefined.

ValidFieldNames is a union type that enumerates the valid field names for the form. These correspond to the fields defined in the FormData type.

How to Create a Form with React-Hook-Form

Now that we have defined the types for the form, let's create a reusable form field component and the form component.

Create a Reusable Form Field Component

Let's create a reusable FormField component that handles rendering an input element, registering it with the form using react-hook-form, and displaying a validation error message when necessary.

Head on to the /app/components/FormField.tsx file and update the component:

import { FormFieldProps } from "@/types";

const FormField: React.FC<FormFieldProps> = ({
  type,
  placeholder,
  name,
  register,
  error,
  valueAsNumber,
}) => (
  <>
    <input
      type={type}
      placeholder={placeholder}
      {...register(name, { valueAsNumber })}
    />
    {error && <span className="error-message">{error.message}</span>}
  </>
);
export default FormField;

Imports:

• The component imports the FormFieldProps type from the @/types module. This type contains the expected properties for a form field, such as type, placeholder, name, register, error, and valueAsNumber.

Input Element:

• The component renders an <input> element with attributes set based on the provided props (type, placeholder, name).
• The ...register(name, { valueAsNumber }) syntax is used to register the input field with the form, enabling form state management.

Error Handling:

• If there is a validation error, a <span> element is rendered, displaying the error message.

Create the Form Component

The Form component will utilize the react-hook-form library to manage the form state. It modularizes form fields by using our reusable FormField component.

Navigate to app/components/Form.tsx and update it with the code below:

import { useForm } from "react-hook-form";
import { FormData } from "@/types";
import FormField from "./FormField";

function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<FormData>();

  const onSubmit = async (data: FormData) => {
      console.log("SUCCESS", data);
  }

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="grid col-auto">
          <h1 className="text-3xl font-bold mb-4">
            Zod & React-Hook-Form
          </h1>
          <FormField
            type="email"
            placeholder="Email"
            name="email"
            register={register}
            error={errors.email}
          />

          <FormField
            type="text"
            placeholder="GitHub URL"
            name="githubUrl"
            register={register}
            error={errors.githubUrl}
          />

          <FormField
            type="number"
            placeholder="Years of Experience (1 - 10)"
            name="yearsOfExperience"
            register={register}
            error={errors.yearsOfExperience}
            valueAsNumber
          />

          <FormField
            type="password"
            placeholder="Password"
            name="password"
            register={register}
            error={errors.password}
          />

          <FormField
            type="password"
            placeholder="Confirm Password"
            name="confirmPassword"
            register={register}
            error={errors.confirmPassword}
          />
          <button type="submit" className="submit-button">
            Submit
          </button>
        </div>
      </form>
  );
}

export default Form;

Imports:

• The useForm hook provides functionality for managing form state and validation.
• FormData represents the structure of the form data.
• FormField is our reusable form field component.

Form Component:

• Form-related functions and state variables are destructured from the useForm hook, which is explicitly typed with FormData to define the shape of the form data.
• Within the form, the FormField components are rendered for different input fields such as email, GitHub URL, years of experience, password, and confirm password.

Run Code:

Import the Form component into /app/page.tsx file:

"use client";
import Form from "./components/Form";

function Home() {

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
     <Form />
    </main>
  );
}

export default Home;

Visit http://localhost:3000/ to view the form:

http://localhost:3000/

In summary, our Form component is a basic form structure that uses the react-hook-form library for state management and employs a reusable FormField component to handle the rendering and validation of individual form fields.

How to Integrate Zod for Schema Validation

Zod stands out as a schema declaration and validation library, with TypeScript as its primary focus. The term "schema" encompasses various data types, ranging from strings, numbers, and booleans to more complex objects.

Define a Form Schema with Zod

Let's create a TypeScript-backed form schema using Zod for our form structure.

Head to your /types.ts file, add the new imports, and create a user schema with the code below:

 import { z, ZodType } from "zod"; // Add new import

 export const UserSchema: ZodType<FormData> = z
  .object({
    email: z.string().email(),
    githubUrl: z
      .string()
      .url()
      .includes("github.com", { message: "Invalid GitHub URL" }),
    yearsOfExperience: z
      .number({
        required_error: "required field",
        invalid_type_error: "Years of Experience is required",
      })
      .min(1)
      .max(10),
    password: z
      .string()
      .min(8, { message: "Password is too short" })
      .max(20, { message: "Password is too long" }),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"], // path of error
  });

Imports:

• z is an instance of the Zod object.
• ZodType is a generic type that represents a Zod schema type for a specific data structure.

User Schema:

• export const UserSchema: ZodType<FormData> = ...: The UserSchema represents a Zod type that corresponds to the structure defined by the FormData type.
• z.object({...}): This part defines an object schema using Zod. The object has several fields, each with its own validation rules.
• Inside the object, each field is defined with its own validation rules using Zod methods like z.string(), z.url(), z.number(), and z.min(). Optional custom error messages are provided for some of the fields.
• z.refine((data) => data.password === data.confirmPassword, { /* ... */ });: Adds a refinement to the schema to check if the password and confirmPassword fields match. If not, a custom error message is provided, and the error is associated with the confirmPassword field.

How to Integrate Zod with React-Hook-Form for validation

Now that we've set up the Zod schema for the form, let's integrate it with our existing Form component. To do this, we'll use zodResolver from the [@hookform](https://www.npmjs.com/package/@hookform/resolvers) library.

zodResolver is a resolver function that integrates the Zod schema validation with the form validation process.

Head over to the app/components/Form.tsx file and update it with the code below:

// Update imports
import { FormData, UserSchema } from "@/types";
import { zodResolver } from "@hookform/resolvers/zod";

function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<FormData>({
    resolver: zodResolver(UserSchema), // Apply the zodResolver
  });

{/* Existing Code...*/}

}

If you try submitting the form with empty input fields, you will see error messages on the browser.

Error Messages - http://localhost:3000/

Additionally, our custom error messages, such as prompting users to provide a valid GitHub URL and checking if the passwords match, are demonstrated in the image below:

Custom Error Messages - http://localhost:3000/

How to Handle Server-Side Errors

When creating forms, data integrity and type safety are very important, given that submitted data goes to the website's server. This leads us to the significance of handling server-side errors — an extra security measure to make sure data from the client is accurate and non-malicious.

How to Implement Server-Side Validation

To implement server-side validation, we will leverage Next.js' backend capabilities to build a simple server. This server will receive and validate the data submitted through our form.

Navigate to app/api/form/route.ts and include the code below:

import { UserSchema } from "@/types";
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  // Retrieve the JSON data from the request body
  const body = await request.json();

  // Use Zod to validate the received data against the UserSchema
  const result = UserSchema.safeParse(body);

  // Check if the validation is successful
  if (result.success) {
    return NextResponse.json({ success: true });
  }

  // If validation errors, map them into an object
  const serverErrors = Object.fromEntries(
    result.error?.issues?.map((issue) => [issue.path[0], issue.message]) || []
  );

  // Respond with a JSON object containing the validation errors
  return NextResponse.json({ errors: serverErrors });
}

Imports:

• The UserSchema we defined earlier is imported.
• NextResponse from the next/server module, which allows us to craft server responses in a Next.js environment.

POST Function:

• const body = await request.json(): Retrieves the JSON data from the request body and stores it in the body variable.
• const result = UserSchema.safeParse(body): Utilizes the safeParse method provided by Zod to validate the received data against the UserSchema. The result contains information about whether the validation was successful and, if not, details about the validation issues.
• if (result.success) { return NextResponse.json({ success: true }); }: If the validation is successful, a JSON response with { success: true } is sent.
• const serverErrors = Object.fromEntries(/* ... */): If there are validation errors, the code maps them into an object with field names and corresponding error messages.
• return NextResponse.json({ errors: serverErrors }): Responds with a JSON object containing the validation errors.

In your terminal, stop running the project and run npm run dev again to restart the server.

How to Integrate Server-Side Validation

To integrate the server-side validation, we have to update the onSubmit function in the Form component.

Head over to the /app/components/Form.tsx file and update the imports and onSubmit function:

// Update import
import { FormData, UserSchema, ValidFieldNames } from "@/types";  
import axios from "axios";

function Form() {
{/* Existing Code... */}

  const onSubmit = async (data: FormData) => {
    try {
      const response = await axios.post("/api/form", data); // Make a POST request
      const { errors = {} } = response.data; // Destructure the 'errors' property from the response data

      // Define a mapping between server-side field names and their corresponding client-side names
      const fieldErrorMapping: Record<string, ValidFieldNames> = {
        email: "email",
        githubUrl: "githubUrl",
        yearsOfExperience: "yearsOfExperience",
        password: "password",
        confirmPassword: "confirmPassword",
      };

      // Find the first field with an error in the response data
      const fieldWithError = Object.keys(fieldErrorMapping).find(
        (field) => errors[field]
      );

      // If a field with an error is found, update the form error state using setError
      if (fieldWithError) {
        // Use the ValidFieldNames type to ensure the correct field names
        setError(fieldErrorMapping[fieldWithError], {
          type: "server",
          message: errors[fieldWithError],
        });
      }
    } catch (error) {
      alert("Submitting form failed!");
    }
  };
{/* Existing Code... */}
}

• axios is used to make a POST request to the server endpoint /api/form with the form data.
• The errors object is extracted from the response data.
• A mapping (fieldErrorMapping) between field names and their corresponding ValidFieldNames is defined.
• It then checks if there are any errors related to form fields by iterating over the fieldErrorMapping and finding the first field with an error.
• If a field with an error is found, the setError function from react-hook-form is used to set an error for the corresponding field. The error type is marked as "server," and the error message comes from the server response.
• If there's an error in the entire try block, it catches the error and displays an alert: "Submitting form failed!"

Now, to test if we can receive errors from the server, we'll deliberately send improperly formatted data to the server. In your onSubmit function, replace the data object with the incorrect data in the code block below:

{/* Existing Code...*/}
  const onSubmit = async (data: FormData) => {

    try {
      // Update data sent in axios with incorrect data
      const response = await axios.post("/api/form", {
        email: "Not an email",
        githubUrl: "Not a URL",
        yearsOfExperience: "Hello",
        password: 1234,
        confirmPassword: 1234,
      }); // Make a POST request

{/* Existing Code...*/}
}

Fill the form in the browser normally and submit the form.

Inspect the "Network" tab within the browser's developer tools. You'll find error messages coming directly from the server, as demonstrated in the image below:

Server errors - http://localhost:3000/

If you're not getting any response from your server, remember to stop running your project in your terminal and run npm run dev again to re-start the server.

Conclusion

In this tutorial, we built a form with React-Hook-Form and validated it with Zod. With Zod, we explored schema validation, customized error messages, and server-side errors. The integration of React-Hook-Form and Zod presents a powerful, developer-friendly solution to creating resilient forms.

You can reach out to me on Twitter if you have any questions.

You can check out the source code and the deployed app.

Resources:

• Zod Documentation
• Zod Error Handling
• React-Hook-Form Documentation
• Hookform Resolvers

Like most newbies, I went to Google to find some inspiration. As I scrolled through the internet, I stumbled upon Skillcrush’s list of HTML and CSS projects for beginners.

Number 5 piqued my interest, so I googled some images on how HTML forms should look. I thought “Oh I can do this. This looks easy!” But this project turned out to be a bit harder than I thought.

In this article, I will show you three things I have learned in surviving, I mean making HTML forms error-free. Let’s get started! 😀

Tip #1: Make Sure the Labels and Inputs Match.

When I first started creating HTML forms, I would often use the following methods for creating email input fields:

<label id="text"> Your Email</label>
<input type="text" id="text" name="text">

I would often use text as the label and id's attribute because I thought it was the correct method.

This all changed when I started using WAVE’s accessibility checker to learn how to make my code more accessible. When I ran my form through the checker, it pointed out that the email input did not have a properly associated label, and that can cause screen readers to have difficulty presenting it to users with disabilities.

So, I googled a few sources and found ”HTML Inputs and Labels: A Love Story” by Amber Wilson. Through reading this article, I learned that it’s best to use specific names in the id attribute.

With a new feeling of confidence, I started using this approach. Here’s an example:

In the code snippet above, I used email as the label and input’s id attribute. When I ran it through the accessibility checker, there were no red Xs.

While this victory was sweet, I wanted to learn more ways to ensure that labels and inputs were accessible. So I went to Google and found this HTML Forms attributes article. Through reading, I learned that you can add other attributes like placeholder, which demonstrates how the user should present their contact information.

Through these experiences, I realized that creating harmonious labels and inputs for a form is like constructing a sandwich. You want to make sure that your flavors work well together and use the best features of your oven (or whatever appliance you use) to make your sandwich nice and toasty.

Now before we start getting hungry, let’s move on to my next tip. :)

Tip #2: Be More Semantic When Creating a Button

Formatting your form’s buttons is crucial to the efficiency of your HTML form. Buttons are the main way that your user’s information is sent to your desired destination.

When I first started creating HTML forms, I used to create buttons like this:

<input type="submit">

Like the labels and inputs, I would get a red x on WAVE’s accessibility checker. In the results, it mentioned that a value attribute was missing, which makes it difficult for the screen reader to detect the button.

With that in mind, I decided to do what most beginners do when creating this feature:

<button> Submit</button>

When I ran the code in the WAVE accessibility checker again, it passed a few tests. But something inside me told me that my previous solution was ok too and that I just needed to find a way to add a value attribute to it.

With a new thirst for knowledge, I went to Google and found this article on how to create accessible form components. In the section about buttons, they recommend using the following methods to make this element semantic:

<input type="Submit" value="Submit">
<button type="Submit">Submit</button>

When I ran the first snippet into the accessibility checker, I received no red Xs. The same result occurred when I ran the second code snippet through the accessibility checker.

At first, I didn't know which one to pick because both approaches made the form accessible. But something inside me told to go with what I truly wanted. So, I took a deep breath and chose the following code line:

I decided to go with the second code snippet because it's more explicitly labeled, which makes it easier for screen readers to scan. It's also easier to remember, and is the method that I often use for creating buttons.

Think of it as deciding to go with the brand of bread you’ve always used for your sandwiches instead of picking a different one. As cliché as this saying sounds, sometimes simplicity is best.

Before you start getting hungry again, there is just one more suggestion for making your HTML forms error-free.

Tip #3: Pick the Best CSS Framework Based on Your Needs

When I first started creating the style for my forms, I used to force myself to use CSS frameworks like Flexbox. At the time, my feelings of imposter syndrome were at an all-time high due to seeing other people creating great forms with those frameworks. I felt that if I started using them too, I would get those same designs.

At first, I was happy with using Flexbox as it made things like centering content easier as shown in the snippet below:

Unfortunately, I still wasn't satisfied in the end. I found that the design did not come to fruition as I envisioned.

To combat this feeling, I went to Google to find something to help me solve my dilemma. When I was about to give up, I stumbled upon the article, “How to style forms with CSS: A beginner’s guide” by Supun Kavinda.

My heart leaped with joy when it pointed out that you can use vanilla CSS to create beautiful designs. For example, to make the texts’ input fields look more presentable, I could do this:

input[type=text]{
padding: 10px;
}

With newfound confidence, I gave vanilla CSS another chance, and I can honestly say I was so happy with this decision. Here’s the final result:

I wanted to keep my design simple, so I used basic elements like text-align property to center my form's content.

If I had to pick something that exemplifies this experience, it would be like a sandwich cut into two triangle slices. Simple yet effective.

Overall, sometimes, it’s best to go back to the basics before moving on to something more challenging.

Conclusion

There it is folks, my three tips on how to make your HTML forms error-free.

I know creating HTML forms can be frightening in the beginning. But with these tips, confidence, and some imagination, you can HTML forms that wow your viewers. Now go forth and be great! :)

The most direct way to do that is to ask them some questions. And, in the HTML world, the best tool for recording the answers to those questions is the simple HTML form.

In this guide, I'm going to show you how that's done using basic HTML and just a dash of PHP.

As you'll soon see, the HTML you'll need to present a form is, in fact, pretty straightforward. But that'll only solve half of your problem.

A form will prompt users to enter whatever information you're asking for. But, if we leave it there, nothing will actually happen when they hit the Submit button. And that's because we don't have anything running on our server to collect and process that information.

Building the back end that'll integrate your form with a database engine or an associated application can get really complicated and is way beyond our scope here. But, once we understand the HTML form here, I will show you how you can add some PHP code to handle the code in a basic way.

This article comes from my Complete LPI Web Development Essentials Study Guide course. If you'd like, you can follow the video version here:

How to Prepare Your Linux Server Environment

I'm running a Linux virtual container that's got both PHP and the Apache HTTPD server installed. You can install those packages on an Ubuntu machine this way:

$ sudo apt install apache2 php

I'll start by navigating to the web root directory which is /var/www/html. The ls command will list all the files in the directory.

$ pwd
/var/www/html
$ ls
form.html    index.html    submit.php

That index.html file is the default place holder that's created when Apache is installed. I would replace that with my own home page file if this website was a real project.

How to Create an HTML Form

For now, though, I'll let you see what's inside that form.html file:

<!DOCTYPE html>
<html>
<head>
    <title>Example Form</title>
</head>
<body>
    <h1>Example Form</h1>
    <form action="submit.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

We start with the standard tags and then some <h1> text for a title. But then we open a <form> tag where the action points to a file called submit.php and the method specifies post. "Post" means that any text that's been entered into the form will be posted – or sent – to the submit.php file once the form is submitted.

The <input> tag down at the bottom of the code right before we close out the <form> uses the submit type to send our data.

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

The Submit value attribute is there to print the word "Submit" on the button we'll see on the form. That'll make figuring out how to use the form easier for users.

Now the code used by the form itself is broken down into three pairs of lines:

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>

The first line here is a <label> tag that prints the word "Name:" on the first entry field. The accompanying <input> tag has a type attribute of "text", an id attribute of "name" and is a required field. That means the form submission won't be successful unless this field has a value.

The next pair does the same thing for an email address. But as we see from the type attribute, this field expects the input to conform to the properties of a valid email address. This field is also required.

The final pair – "Message" – takes a <textarea> tag and has a maximum number of rows and columns specified. This field, as you might expect, allows free-form text, but only up to a maximum number of characters.

That's our code. Let's see what it looks like in a browser. First, though, you'll need to get the container's public IP address.

There are a few ways to do that, but the one that involves the fewest keystrokes is to run ip a inside the container.

$ ip a
[...]
12: eth0@if13: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc noqueue state UP group default qlen 1000
    link/ether 00:16:3e:81:57:1b brd ff:ff:ff:ff:ff:ff link-netnsid 0
    inet 10.0.3.216/24 metric 100 brd 10.0.3.255 scope global dynamic eth0
       valid_lft 3154sec preferred_lft 3154sec
    inet6 fd42:e265:3791:64f9:216:3eff:fe81:571b/64 scope global mngtmpaddr noprefixroute 
[...]

The IP I got was 10.0.3.216. Just add form.html to the value you got and pop it into your browser URL bar and the site will load. This is, by the way, a local NAT IP, so it won't be accessible outside of my home network.

Feel free to type something into the Name, Email, and Message fields, but there's no point hitting the Submit button just yet. That's because, without some PHP magic, nothing will happen. And I haven't shown you that PHP yet.

How to Write a PHP Script to Capture User Inputs

PHP, by the way, is a web-friendly scripting language that's a popular choice for adding programmed functionality to web pages. In fact, you can even incorporate PHP code directly into your HTML code. But here's how it'll look on its own, in a file called submit.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve form data
    $name = $_POST["name"];
    $email = $_POST["email"];
    $message = $_POST["message"];

    // Display the submitted data
    echo "Name: " . $name . "<br>";
    echo "Email: " . $email . "<br>";
    echo "Message: " . $message . "<br>";
}
?>

Remember how our HTML post method sent the form data to this file? Well here's what PHP is going to do with it. The if block looks for posted data and then organizes it by field: name, email, and message. Normally, you'd probably send that data along to a database but, for simplicity, this code will just print it back to the page to prove that we actually had it.

Let's see what that'll look like. I click the Submit button and the form is replaced by the text I'd entered. Nothing spectacular, but it does nicely illustrate how forms work with PHP.

With this simple code, you're now able to create your own HTML forms that collect and process user input.

Your next step will be to connect with a back end database so you can save and manipulate that data. For for now, enjoy this accomplishment!

This article comes from my Complete LPI Web Development Essentials Study Guide course. And there's much more technology goodness available at bootstrap-it.com

Form building in React can be complex and time-consuming, requiring state management, validation, and error handling.

To simplify this process, the Formik library provides an intuitive solution for building forms in React. Formik has a straightforward API and built-in validation, making collecting and manipulating input data in React applications easy.

What is Formik?

[Formik](https://formik.org/) is a popular open-source library for building and processing form data in React applications. It provides many utility components and functions that make handling form data in a React application more enjoyable.

Traditional form-management method in React requires creating a universal or single useState() hook for each form field, adding an event listener to each field, and triggering a method to update them individually.

// Infuriating traditional react form management method

import { useState } from "react";

function InputForm() {
  const [input1, setInput1] = useState("");
  const [input2, setInput2] = useState("");

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    if (name === "input1") {
      setInput1(value);
    } else if (name === "input2") {
      setInput2(value);
    }
  };

  const handleSubmit = (event) => {
   // . . .
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="input1" value={input1} onChange={handleInputChange} />
      <input name="input2" value={input2} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default InputForm;

On the other hand, Formik handles all of these tedious operations for us under the hood. We only need to import its provided components – our form data are readily available.

<Formik
  onSubmit={(formData) => {
    console.log(formData);
  }}
>
  {({ isSubmitting }) => (
    <Form>
      <Field type="text" name="fullname" placeholder="Enter fullname" />
      <Field type="email" name="email" placeholder="Enter address" />
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>;

In addition to helping us handle form data, Formik provides some other mechanisms that let us validate form fields, track form submission state, and handle errors.

This tutorial will show you how to use Formik in a React app by creating a simple registration form.

How to Install Formik

To start with Formik, let's create a new React app using the below command:

npx create-react-app my-app
cd my-app
npm start

Once we have our React app set up, we can install Formik with the following command:

npm install formik --save

Once we've installed Formik, we can import its components and utilize them in our application.

import { Formik, Form, Field, ErrorMessage } from 'formik';

In the above import code, we have the following:

• The Form component wraps all the form fields and provides essential context for using Formik's tools. This includes managing the form's state, handling validation, and submitting the form.
• Field is a component provided by Formik that represents a form field. We can use this component to render an input, select, or other form elements. It automatically handles the state of the field, such as its value and validation.
• ErrorMessage is a component provided by Formik that renders an error message for a specific field. We can use this component to display validation errors for a field. This is especially helpful for displaying form errors in a user-friendly way.

How to Create a Form with Formik

We can create a form input by wrapping the form and its fields inside the Formik component. The code below is an example of creating form input using Formik:

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
function App() {
 return (
   <div className="App">
     <center>
       <h1>Register a new account</h1>
       <Formik>
         {({ isSubmitting }) => (
           <Form>
             <Field
               type="text"
               name="fullname"
               placeholder="Enter your fullname"
             />
             <ErrorMessage name="fullname" component="div" />

             <Field
               type="email"
               name="email"
               placeholder="Enter email address"
             />
             <ErrorMessage name="email" component="div" />

             <Field type="password" name="password" />
             <ErrorMessage name="password" component="div" />

             <button type="submit" disabled={isSubmitting}>
               Submit
             </button>
           </Form>
         )}
       </Formik>
     </center>
   </div>
 );
}
export default App;

In the above code, the Formik component wraps the form and provides utilities like form validation and submission handling. The Field component defines each form input, such as fullname, email, and password, while the ErrorMessage component displays validation errors for each field.

The isSubmitting prop is passed to the render prop function, which is used to disable the submit button while the form is submitted.

Next, we must set the field's initial values by passing the initialValues prop. We can set the initial values for fullname, email, and password using the code below:

<Formik initialValues={{ fullname: "", email: "", password: "" }}>

Form Validation with Formik

When creating forms, it's essential to validate input data to prevent errors and provide an interactive user experience. The code below shows how to validate form input data using Formik.

<Formik
         initialValues={{ fullname: "", email: "", password: "" }}
         validate={(values) => {
           const errors = {};
           if (!values.fullname) {
             errors.fullname = "Required";
           }

           if (!values.email) {
             errors.email = "Required";
           } else if (
             !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
           ) {
             errors.email = "Invalid email address";
           }
           if (!values.password) {
             errors.password = "Required";
           }
           return errors;
         }}
       >

In the code above, we use the validate prop to define a validation function that will be called whenever the user interacts with the form. This function takes the current values of the form fields as a parameter and returns an object that specifies any errors in the form data.

Form Submission With Formik

Formik uses an onSubmit function to handle form data whenever the submit button gets clicked. It first validates the data using the validation function.

To process a form using the onSubmit function, add the following code to the Formik component:

 <Formik
   initialValues={{ fullname: "", email: "", password: "" }}
   // . . .
   onSubmit={(values, { setSubmitting }) => {
     setTimeout(() => {
       alert(JSON.stringify(values, null, 2));
       setSubmitting(false);
     }, 400);
   }}
>

From the code above, the onSubmit function is called when the form is submitted and uses the setSubmitting function to update the Formik component's state during the submission process.

Here is the output of the form we created using Formik:

Conclusion

Formik is a React library that makes building forms easy and intuitive, especially when creating complex forms or trying to save time during development.

In this tutorial, we learned how to use Formik to create and manage form states in React applications. If you want to learn more about Formik, you can check out their official documentation.

Without forms, many of the tasks that we take for granted on the web, such as logging in, signing up, or making purchases, would not be possible.

As such, learning how to create effective and user-friendly forms is essential for developers looking to build engaging and interactive web applications.

With its extensive collection of built-in hooks, React provides several features and techniques for creating and managing forms, including state management, event handling, and form validation.

The purpose of this guide is to provide a comprehensive and in-depth look at creating forms in React.

Getting Started...

In React, there are two ways of handling form data:

• Controlled Components: In this approach, form data is handled by React through the use of hooks such as the useState hook.
• Uncontrolled Components: Form data is handled by the Document Object Model (DOM) rather than by React. The DOM maintains the state of form data and updates it based on user input.

To better understand the difference between controlled and uncontrolled components, consider there are two ways of riding a bike.

In the first approach, you let the bike take control. You sit on the bike and let it decide the direction and speed. You might try to make it go in a certain direction by leaning your body, but ultimately, the bike decides where to go.

This is similar to uncontrolled components in React. You place a form element in the component, and the DOM takes control of it. The DOM decides the state of the input element and updates it based on a user's input.

In the second approach, you take control of the bike. You hold the handlebars and pedal, and you decide where to go and how fast to ride. You can easily slow down or speed up as needed.

This is similar to controlled components where a React component takes control of the form data, and maintains the state of form elements. The component decides when and how to update the state, and it re-renders itself based on the state changes.

In the upcoming sections, we will expound upon the distinction between controlled and uncontrolled components and provide practical examples to illustrate how each operates.

Controlled Components in React

In React, a controlled component is a component where form elements derive their value from a React state.

When a component is controlled, the value of form elements is stored in a state, and any changes made to the value are immediately reflected in the state.

To create a controlled component, you need to use the value prop to set the value of form elements and the onChange event to handle changes made to the value.

The value prop sets the initial value of a form element, while the onChange event is triggered whenever the value of a form element changes. Inside the onChange event, you need to update the state with the new value using a state update function.

Here's an example:

import {useState} from 'react';

export default function  ControlledComponent()  {
    const  [inputValue, setInputValue] =  useState('');

    const  handleChange = (event) => {
        setInputValue(event.target.value);
    };

return  (
<form>
    <label>Input Value:
    <input  type="text"  value={inputValue} onChange={handleChange} />
    </label>
    <p>Input Value: {inputValue}</p>
</div>
)};

In this example:

The useState hook defines a state variable (inputValue) and a state update function (setInputValue).

The value prop sets the initial value of the input element to the value of inputValue.

Also, the onChange event handles changes made to the input value. The handleChange function updates the inputValue state with the new value of the input element, and the updated value is immediately reflected in the state and displayed on the screen.

As the user types into the input field, the handleChange function updates the state variable using the "setInputValue" function. The component is then re-rendered, and the input field's value attribute is updated to reflect the new value of inputValue.

The value of the input field and the text displayed below it are always in sync, making it a controlled component.

How to handle dropdowns and checkboxes in Controlled Components

Just like with input elements, the value of a dropdown can be set by using the value prop in conjunction with the onChange event handler to update the state of the component.

For example, to handle a dropdown menu, you can define the initial value of the dropdown menu within the state of the component, then update the state when the value of the dropdown changes:

import { useState } from "react";

export default function Dropdown()  {
    const [selectedOption, setSelectedOption] = useState("option1");

    const  handleDropdownChange = (event) => {
        setSelectedOption(event.target.value);
    };

return  (
    <div>
        <label>
            Select an option:
                <select  value={selectedOption} onChange={handleDropdownChange}>
                <option  value="option1">Option 1</option>
                <option  value="option2">Option 2</option>
                <option  value="option3">Option 3</option>
            </select>
        </label>
        <p>Selected option: {selectedOption}</p>
    </div>
    );
}

Similarly, you can handle checkboxes by setting the checked prop of the checkbox input element based on the state of a component, and then updating the state when a checkbox is clicked.

Here's an example:

import { useState } from "react";

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <form>
      <label htmlFor="color">
        <input type="checkbox" name="color" checked={isChecked} onChange={handleChange}/>
        Blue
      </label>

      {isChecked && <div>Blue is selected!</div>}
    </form>
  );
}

export default Checkbox;

In this example, we have defined a state variable isChecked to keep track of whether the checkbox is checked or not. When the checkbox is clicked, the handleChange function is called, and it updates the isChecked state variable to a new value (true or false.).

The isChecked variable controls the checked attribute of the checkbox input and conditionally renders a message indicating that the checkbox is selected.

How to handle multiple form fields

When working with forms in React, it's common to have several form elements, such as text inputs, checkboxes, radio buttons, and others.

To manage the state of these form elements, you can define the values for the input fields as an object using a single state variable and update each respective state variable using the onChange event.

As an example, suppose you wish to create a form with the following fields:

• Text input for the user's name
• An email field for the user's email
• A textarea field for the user's message

Here's how you could handle these fields:

import { useState } from "react";

export default function Multiple() {
  const [formData, setFormData] = useState({name: "",email: "",message: ""});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}, Message: ${formData.message}`
    );
};

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" value={formData.name} onChange={handleChange}/>

      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" value={formData.email} onChange={handleChange}/>

      <label htmlFor="message">Message:</label>
      <textarea id="message" name="message" value={formData.message} onChange={handleChange}/>

      <button type="submit">Submit</button>
    </form>
  );
}

In the example code:

The useState hook defines a state object named formData that contains three properties: name, email, and message, each initialized to an empty string.

The handleChange function is called whenever a user types in one of the form fields. It extracts the name and value of the form field that has changed using the event.target object and then updates the formData state variable using the setFormData function.

The setFormData function uses the spread operator (...) to copy the previous formData object. Then it updates the value of the changed form field by setting its value prop with the new value.

By using an object to manage form data, we can easily keep track of the values of multiple form elements. This makes it easier to manage and manipulate the state of our form data, especially when dealing with complex forms with many form elements.

How to validate form input

Validating forms refers to the process of checking user input data to ensure that it meets specific criteria or requirements before it is submitted to a server or used in some other way.

Form validation can take various forms, depending on the type and complexity of the data being collected. Common types of form validation include:

• Required field validation: Checking that required fields are not left empty.
• Format validation: Ensuring that input data is in the correct format (for example, email addresses, phone numbers, and so on).
• Length validation: Checking that input data is within a certain length range.
• Pattern validation: Checking that input data matches a specific pattern.

Common methods for form validation include using built-in HTML validation attributes like required, minlength, and maxlength, as well as using React to perform custom validation logic.

As an example, suppose we have a form with an input field that requires a minimum of 5 characters. We can use state to track the value of the input field and display an error message if the length of the value is less than 5.

import { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const [inputError, setInputError] = useState(null);

  function handleInputChange(event) {
    const value = event.target.value;
    setInputValue(value);

    if (value.length < 5) {
      setInputError('Input must be at least 5 characters');
    } else {
      setInputError(null);
    }
  }

  function handleSubmit(event) {
    event.preventDefault();
    if (inputValue.length >= 5) {
      // submit form
    } else {
      setInputError('Input must be at least 5 characters');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Fruit:
        <input type="text" value={inputValue} onChange={handleInputChange} />
      </label>
      {inputError && <div style={{ color: 'red' }}>{inputError}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, we have a simple form that allows the user to input a fruit name. The form has two states:

• inputValue: Represents the current value of the input field
• inputError: Represents any errors that may arise during form validation.

The handleInputChange function is called every time a user types a character in the input field. It updates the inputValue state to reflect the current value of the input field, and then checks whether the value is at least 5 characters long.

If the value is less than 5 characters, it sets the inputError state to the appropriate error message. Otherwise, it sets the inputError state to null (indicating that there are no errors).

Uncontrolled Components in React

Uncontrolled components in React refer to form elements whose state is not managed by React. Instead, their state is handled by the browser's DOM.

For instance, let's say you have a form that consists of a text input field, a select box, and a checkbox. In a controlled component, you would create a state for each form element and write event handlers to update the state whenever the user interacts with any of the form elements.

In contrast, an uncontrolled component allows the browser to handle the form elements' state. When a user enters text into a text input field or selects an option from a select box, the browser updates the DOM's state for that element automatically.

To get the value of an uncontrolled form element, you can use a feature called "ref". "Refs" provide a way to access the current value of DOM elements. You can create a "ref" using the useRef hook, then attach it to the form element you want to access. This allows you to retrieve the current value of an element at any time, without needing to manage its state in your React component.

Here's an example of an uncontrolled component:

import { useRef } from "react";

export default function Uncontrolled() {
  const selectRef = useRef(null);
  const checkboxRef = useRef(null);
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Input value:", inputRef.current.value);
    console.log("Select value:", selectRef.current.value);
    console.log("Checkbox value:", checkboxRef.current.checked);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <p>Name:</p>
        <input ref={inputRef} type="text" />
      </label>
      <label>
        <p>Favorite color:</p>
        <select ref={selectRef}>
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
        </select>
      </label>
      <label>
        Do you like React?
        <input type="checkbox" ref={checkboxRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example:

We have a form that contains a text input field, a select box, and a checkbox. Instead of creating state for each form element and writing event handlers to update the state, we're using uncontrolled components. This means that the browser is responsible for managing the state of the form elements.

When a user interacts with a form element, the browser automatically updates the DOM's state for that element. And to retrieve the current values of each form element, we're using the useRef hook.

Uncontrolled components can be useful in certain situations, such as when you need to integrate with third-party libraries or when you don't need to manipulate the form data.

Overall, uncontrolled components are a simpler approach to working with forms in React, and they can make your code more concise and easier to read. But it's important to note that using ref to access form element values can make your code harder to test and maintain, so use them judiciously.

How to Use React Component Libraries

Creating forms in React can be overwhelming, especially if you're new to the framework. You need to manage form state, handle user input, validate input data and more.

But the good news is that there are third-party libraries available to make everything easier for you.

These libraries can help simplify your form creation process. They provide a wide range of features including form validation, input masking, submission handling, error handling, and more. This makes it much easier to create forms that are both user-friendly and functional.

Some popular form libraries include:

• Formik
• Redux Form
• React Hook Form
• Yup.

In this section, we'll focus on learning how to use the React Hook Form library.

How to use React Hook Form

React Hook Form is a lightweight library for managing forms in React applications. Whether you need to create a simple contact form or a complex multi-step form, React Hook Form can help simplify your form creation process.

Installation

Getting started with React Hook Form is straightforward and requires only a few steps. First, you'll need to install the library in your project. You can do this using npm by running the following command:

npm install react-hook-form

Alternatively, you can use yarn to install React Hook Form:

yarn add react-hook-form

Once you've installed the library, you need to import the useForm hook from the react-hook-form package in your component.

import  { useForm }  from  "react-hook-form";

By importing the useForm hook, you can start using React Hook Form to manage forms in your application.

The useForm hook provides several functions and properties that you can use to manage your form:

• register: This function is used to register form fields with React Hook Form.
• handleSubmit: This is used to handle form submissions. It takes a callback function that is called when the form is submitted.
• errors: This represents an object containing any validation errors that occur when a form is submitted.
• watch: This function is used to watch for changes to specific form fields. It takes an array of form field names and returns the current value of those fields.

These are just a few examples of the functions and properties the useForm hook provides. You can find the complete list of functions and properties in the React Hook Form documentation.

How to set up the form

After importing the useForm hook, you can invoke it to get access to the functions and properties that it provides:

const { register, handleSubmit, formState:{errors} } = useForm();

In the above code, we're using destructuring to extract the register, handleSubmit, and errors properties from the useForm hook.

How to register form fields

The next step is to register form fields using the register function. The register function takes two parameters:

• name: The name of the form field.
• validationOptions: An optional object containing validation rules you can apply to a form field.

Here's an example of registering an input field and adding a validation rule that it is a required field.

<input name="firstName" {...register("firstName", { required: true })} />

How to handle form submission

To handle form submission, you can use the handleSubmit function.

const onSubmit = (data) => console.log(data);

<form onSubmit={handleSubmit(onSubmit)}>
  // form fields
</form>

In this example, we pass the onSubmit function to the handleSubmit function. The onSubmit function will be called when the form is submitted and will receive an object containing the values of each form field.

How to display validation errors

You can use the errors object to display any validation errors.

<input {...register("firstName", { required: true })} />
{errors.firstName && <p>This field is required</p>}

In the above code, we're using the errors object to display a validation error message if the firstName field is not filled out. We can also display error messages for other validation rules, such as minimum and maximum lengths, regular expressions, and more.

How to put it all together

With a basic understanding of React Hook Form, let's now put everything into practice and create a simple form with two fields: email and password. We'll require both fields to be filled out and validate the email field using a regular expression.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Email</label>
      <input type="email" {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />
      {errors.email && <p>Email is required and must be valid</p>}

      <label>Password</label>
      <input type="password" {...register("password", { required: true })} />
      {errors.password && <p>Password is required</p>}

      <button type="submit">Submit</button>
    </form>
  );
}

export default LoginForm;

In this section, we've covered the basics of how to use React Hook Form:

• To register form fields
• Handle form submissions
• Display validation errors

But this is just the tip of the iceberg. React Hook Form offers many more features and capabilities that we haven't covered here. So I highly recommend that you check out the React Hook Form documentation to learn more about how to use it effectively in your projects.

Recap

In this tutorial, we covered the basics of building forms in React. We learned that there are two common approaches to building forms in React: controlled and uncontrolled components.

Controlled components rely on state management to track the state of form inputs, while uncontrolled components use refs to access the form inputs and their values.

We also learned that using third-party libraries make form creation in React much easier. Libraries like React Hook Form provide a lot of functionality out of the box and can help reduce the amount of boilerplate code you need to build forms in React.

With these concepts in mind, you should be able to build complex forms in React that are easy to manage and provide a great user experience.

Conclusion

If you want access to all the code used in this article, including the styling, I have compiled it all in a single repository for your convenience. Head over to the repository and you will find everything you need.

Happy coding!

But then you might wonder – how do you get this data from the form? Well, you can do this with JavaScript.

In this article, you will learn how to create a form and get data from it when the form is submitted with JavaScript.

This article won't cover how to input data into a database – it will only cover how to submit a form. But you should know that once you have this data, you can send it to the database of your choice, use it to manipulate information, and much more.

To submit a form using JavaScript, you must first create the form and add distinctive, specific attributes to the input fields. You will use these attributes to retrieve the data when the user submits and then calls a function to handle validations (possibly if any data is submitted).

How to Create the HTML Form

To get started, let's create a basic HTML form with two fields: username and password. We'll also add a button that will be used to submit the form and trigger a JavaScript action.

<form action="">
  <h1>Login</h1>
  <input type="text" class="form-control" placeholder="Enter your Username...">
  <input type="password" class="form-control" placeholder="Enter your Password...">
  <button type="submit">Submit</button>
</form>

To get this form’s data via JavaScript, you’ll need to attach specific attributes to the form input field and the form itself. These attributes can be an id, a class, or even with the name tag. This will help get the data in JavaScript using their document methods.

For example, if you use an id attribute on your input field, you can access the input field data and other values using the document method getElementByID('idName'):

// HTML
<input type="text" id="username" class="form-control" placeholder="Enter your Username...">

// JS
let myUsername = document.getElementById('username');
console.log(myUsername);

If you use a class attribute, you'll use getElementsByClassName(className), which returns an array of all elements with the className. If it is only one element, you can use the index number 0 to access its data:

// HTML
<input type="text" class="username" class="form-control" placeholder="Enter your Username...">

// JS
let myUsername = document.getElementsByClassName('username');
console.log(myUsername[0]);

If you use the name attribute, you'll use getElementsByName(name). This is similar to how the class attribute works since it also returns an array which you can loop through or access with its index number:

// HTML
<input type="text" name="username" class="form-control" placeholder="Enter your Username...">

// JS
let myUsername = document.getElementsByName('username');
console.log(myUsername[0]);

Note: This will not return the input value but the input element itself.

How to Submit a Form with JavaScript

The first step is to attach your preferred attribute to the form, which you can use to track when the form is submitted. This can be an id, class or name attribute, but for this article, I will use id for the form and input fields:

<form action="" id="loginForm">
  <h1>Login</h1>
  <input type="text" id="username" class="form-control" placeholder="Enter your Username...">
  <input type="password" id="password" class="form-control" placeholder="Enter your Password...">
  <button type="submit">Submit</button>
</form>

At this point, you can now handle form submission with JavaScript. You first get the form with your preferred attribute, which can be an id, and store it in a variable:

let loginForm = document.getElementById("loginForm");

Then you can attach the addEventListener to the form variable and listen for a submit event. This event listener allows you to attach a callback function which gets triggered once the form is submitted:

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  // handle submit
});

At this point, you can now get the form data and handle any operation you wish. For this article, let’s first validate the data by checking if the input is empty before performing any operation:

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  let username = document.getElementById("username");
  let password = document.getElementById("password");

  if (username.value == "" || password.value == "") {
    // throw error
  } else {
    // perform operation with form input
  }
});

This is the entire JavaScript code:

let loginForm = document.getElementById("loginForm");

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  let username = document.getElementById("username");
  let password = document.getElementById("password");

  if (username.value == "" || password.value == "") {
    alert("Ensure you input a value in both fields!");
  } else {
    // perform operation with form input
    alert("This form has been successfully submitted!");
    console.log(
      `This form has a username of ${username.value} and password of ${password.value}`
    );

    username.value = "";
    password.value = "";
  }
});

See the Pen Form Submission JS by Olawanle Joel (@olawanlejoel) on CodePen.

Conclusion

In this article, you have learned how to submit a form with JavaScript and how it works with the various DOM methods.

There are other ways you can do this, but this is a straightforward way to handle submission in JavaScript.

You can access over 150 of my articles by visiting my website. You can also use the search field to see if I've written a specific article.

Today I'm going to show you all the things to consider when building the perfect HTML input. Despite its seemingly simple nature, there's actually a lot that goes into it.

How to Make the Control

Well, we need to start somewhere. Might as well start with the control itself.

HTML offers three different form controls to choose from: [<input>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input), [<textarea>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea), and [<select>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select). Today, we'll use <input>, but the same rules will apply to the others.

<input />

How to Make <input> Work

Inputs are generally used to capture user data. To do so, they should be placed within a [<form>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element, but that's not quite enough. When the form is submitted, it won't know how to label the input's data.

For a form to include an input's data when the form is submitted, the input needs a [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute. You don't need state management or data binding. Just a name.

<input name="data" />

How to Make the Input Accessible

Now that we've made the robots happy, it's time to focus on the humans.

Every input also needs a label, both for clarity and for accessibility. There are a few options:

• Add a [<label>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) element with a [for](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for) attribute and assign it to the input's [id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) (explicit label).
• Wrap the input with a <label> element (implicit label).
• Add an [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute to the input.
• Add an [aria-labeledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute to the input and assign it to the id of another element.

Of all these options, the most reliable is an explicit label as it works across the most browsers, assistive technologies, and voice-control interfaces. Implicit labels do not work in Dragon Speech Recognition. ARIA attributes are finicky.

The [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) and [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attributes are not proper labels.

I recommend not wrapping everything in a <label> tag because:

1. It's prone to include more content than what would be considered the label. This results in a poor experience for screen-reader users.
2. It's common to add styles to the input's wrapper element. These styles may conflict with the default behavior of a <label>.

In general, I prefer using a [<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) to isolate the control.

<div>
    <label for="input-id">Label</input>
    <input id="input-id" name="data" />
</div>

If you ever want an input that does not show the label, don't remove the label from the HTML. Instead, hide it with CSS or use a less reliable option. Keep the label in the markup and visually hide it with a class with these styles. These styles keep it accessible to assistive technology, while also visually removing it:

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
}

Note that it's still generally advised to include a visible label to avoid any confusion. A placeholder should not serve as a label.

How to Choose a Type (or Not)

In addition to the different tags listed above, you can change the control's behavior by setting an input's [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) attribute. For example, if you wanted to accept a user's email, you can set the type attribute to "email".

Input types can change the behavior or appearance of the UI. Here are just a few examples:

• The "number" type changes behavior by preventing non-number value entries.
• The "color" type changes the UI by adding a button that opens a color picker.
• The "date" type improves the data entry experience by offering a date-picker.
• The "email" type enforces built-in constraint validation on form submission.

However, some input types may be false friends.

Consider an input that asks for a US zip code. Only numerical entries are valid, so it might make sense to use a "number" type. However, one issue with the "number" input is that it adds a scroll event feature such that a user can scroll up on the input to increment the value or down to decrement it.

For a zip code input, it's possible that a user clicks on the input, enters their zip code, then tries to scroll down the page. This would decrement the value they entered, and it's very easy for the user to miss that change. As a result, the number they entered could be wrong.

In this case, it may be better to avoid the type attribute completely and use a [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern) such as [0-9]* if you want to limit the input to only numeric values. In fact, the "number" type is often more problematic than it's worth.

Be Descriptive

Since we've briefly touched on constraint validation, it's a good time to mention descriptions.

Although HTML has built-in validation attributes and there are several more robust JavaScript validation libraries, there is another effective approach to getting users to fill in proper data that can be less annoying.

Tell them exactly what it is you want.

Some form controls like "name" or "email" may be obvious, but for those that are not, provide a clear description for what you need.

For example, if you are asking users to create a new password, tell them what the requirements are before they try to submit the form. And don't forget about assistive technology users.

We can associate an input with a description through visual proximity as well as using the [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) attribute.

<div>
    <label for="password">Password</input>
    <input id="password" name="password" type="password" aria-describedby="password-requirements" />
    <p id="password-requirements">Please create a new password. Must contain at least 8 characters, one uppercase letter, one lowercase letter, and one special character.</p>
</div>

Descriptions are also an effective place to put any validation feedback messages.

Be Flexible

When creating inputs, it's often tempting to add constraints for the acceptable values to ensure the user only sends good data. But being too strict can lead to a poor user experience.

For example, if you ask the user to enter a phone number, consider that there are several different acceptable formats:

• 8008675309
• 800 867 5309
• 800-867-5309
• 800.867.5309
• (800) 867-5309
• +1 (800) 867-5309
• 001 800 867 5309

All of the above represent the same phone number. Ideally, a user would be able to enter any of these formats and still be able to submit the form without issue.

If you want your input to only send number characters, it's possible to allow the user to type in whatever format they want. Then you can use JavaScript to add an event handler to the blur event, and remove any unwanted characters (space, dash, period, and so on) from the input's value. This would leave only the numbers.

Make it Easy

If you've ever filled out a form using a mobile device, you may have noticed that your phone's keyboard looks different on different inputs.

For a basic text input you see the standard keyboard, for email inputs you may see the @ symbol more conveniently placed, and for number inputs you may see the keyboard replaced with a number pad.

In many cases, the browser will choose a more appropriate keyboard to show users if the input type is set. But as we saw above, it's often better to use just a basic text input.

We can still offer a nicer user experience to mobile users by asking the browser to show specific keyboards despite the input missing a type attribute. We can accomplish this with the [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#inputmode) attribute which accepts eight different options.

• text (default value)
• none
• decimal
• numeric
• tel
• search
• email
• url

Want to give it a try? Head over to inputmodes.com on your mobile device. It's pretty cool.

Continue Learning

That's over a thousand words I had to say about creating form controls. I hope you found it useful.

If you would like to continue learning, I wrote a five-part series on how to build better HTML forms:

• Part 1: Semantics
• Part 2: Accessibility
• Part 3: Custom Styles
• Part 4: User Experience
• Part 5: Security

If you liked this article, please share it. It's one of the best ways to support me. You can also sign up for my newsletter or follow me on Twitter if you want to know when new articles are published.

OTP inputs are one of the most fun components you can use in your app. They make the dry process of filling in yet another form a little more engaging.

In this article, you’ll learn how to build an OTP input from scratch in Vue 3. By the end of the tutorial, you'll have built an OTP input that looks like this:

Here’s an overview of the steps the tutorial will follow:

• Project setup
• Building the Basics
• Adding functionality
• Finishing touches
• Conclusion

Prerequisites

To easily follow along with this tutorial, you should have the following:

• A basic understanding of Vue 3 and vanilla JavaScript
• Node.js 16+ installed on your machine
• A basic knowledge of CSS

What's an OTP Input?

In case you aren't familiar with the term, an OTP input is a form component for strings. Each character in the string is typed into a separate box, and the component switches between boxes as you type (as opposed to you needing to click into each box).

It's called an OTP input because they're usually used to let users type in an OTP (One Time Password) that they've received via some other channel, usually email or SMS.

Project Setup

This project won't use any external libraries, so all the setup you need is to create a Vue application with Vite.

Create the Vue project by running the following in a terminal window:

npm init vue@3

If you haven’t installed create-vue on your device, this command will install it. Next, it will present a series of options to you. The options let you specify the project name and select which add-ons you want to include.

Call the project otp-input and don't select any add-ons, as shown below:

After you’ve done that, run:

cd otp-input
npm install
npm run dev

After the dev server starts up, you should see something like this in your terminal:

Open the URL Vite gives you in your browser, and let’s get to the fun stuff.

How to Build the Basics

If you open the otp-input folder in your editor, it should have a file structure like this:

You’re going to adjust this setup to something more suitable. Start by opening src/App.vue and replacing its contents with this:

<template>
</template>

<script setup>

</script>

<style>

</style>

Next, select all the files inside src/components and delete them, and create a file inside components called OTP.vue. On Linux/Mac devices, you can do that by running the following in a new terminal window:

rm -rfv src/components
mkdir src/components
touch src/components/OTP.vue

Then, delete the src/assets folder, and remove the following line from src/main.js:

import './assets/main.css'

Next, open components/OTP.vue, and put the starting template for your OTP into it:

<template>
  <div ref="otpCont">
    <input
      type="text"
      class="digit-box"
      v-for="(el, ind) in digits"
      :key="el+ind"
      v-model="digits[ind]"
      :autofocus="ind === 0"
      :placeholder="ind+1"
      maxlength="1"
    >
  </div>
</template>

Let’s explain this.

The template starts with a container div that you've attached a ref to called otpCont. Inside the container, you have a text input with a v-for on it. The v-for will render one input for each element of a collection we called digits, and attach a two-way binding with the element of digits that shares its index.

The first rendered input will have the autofocus attribute, the placeholder for each input is its index plus one, and each input has a maximum length of one character.

Next is the script for the component. Place the following code into OTP.vue:

<script setup>
  import { ref, reactive } from 'vue';

  const props = defineProps({
    default: String,

    digitCount: {
      type: Number,
      required: true
    }
  });

  const digits = reactive([])

  if (props.default && props.default.length === props.digitCount) {
    for (let i =0; i < props.digitCount; i++) {
      digits[i] = props.default.charAt(i)
    }
  } else {
    for (let i =0; i < props.digitCount; i++) {
      digits[i] = null;
    }
  }

  const otpCont = ref(null)

</script>

After the import, this code defines two props: a required number digitCount that controls the number of inputs, and an optional string default.

Then, it creates the reactive digits array the template needs. If the default prop was provided and its length matches the digitCount prop, digits is initialized using the characters in default. If not the elements of digits are filled with null.

Finally, the code creates the otpCont reference from the template.

The last task for this section is to give the inputs a bit of styling. Put the following at the end of OTP.vue:

<style scoped>
.digit-box {
    height: 4rem;
    width: 2rem;
    border: 2px solid black;
    display: inline-block;
    border-radius: 5px;
    margin: 5px;
    padding: 15px;
    font-size: 3rem;
}

.digit-box:focus {
  outline: 3px solid black;
}

</style>

And that creates the basic form of your OTP.

Next, you’re going to edit the home page of your app to render the input. Replace the contents of src/App.vue with the following:

<template>
  <otp 
    :digit-count="4"
  ></otp>

</template>

<script setup>
import otp from "./components/OTP.vue";
</script>

If you open the app in the browser, you should see the separate inputs rendered like this:

How to Add Functionality

Right now, you don’t really have an OTP input yet. You need to manually switch focus between fields, and there’s no validation. Next, you’ll write the logic to fix that.

Open components/OTP.vue, and add a keydown event handler to the input tag:

 @keydown="handleKeyDown($event, ind)"

Now, create the handleKeyDown function at the end of the script setup section like so:

const handleKeyDown = function (event, index) {
    if (event.key !== "Tab" && 
        event.key !== "ArrowRight" &&
        event.key !== "ArrowLeft"
    ) {
      event.preventDefault();
    }

    if (event.key === "Backspace") {
      digits[index] = null;

      if (index != 0) {
        (otpCont.value.children)[index-1].focus();
      } 

      return;
    }

    if ((new RegExp('^([0-9])$')).test(event.key)) {
      digits[index] = event.key;

      if (index != props.digitCount - 1) {
        (otpCont.value.children)[index+1].focus();
      }
    }
  }

Let’s break down this function. The event handler is called every time a key is pressed while one of the input fields is in focus.

If the pressed key isn’t tab or one of the horizontal arrow keys, the function will call preventDefault(), and move to the next if block.

If the pressed key was Backspace, the value of the digit array at the index of the target input will be set to null. Then if the target input wasn’t the first input, the code shifts focus to its previous sibling.

The last if block uses a regular expression to test if the pressed key was one of the digits 0 to 9. If it was, digits is updated appropriately, and focus is shifted to the next input.

If you open the app in your browser now, you should see that the OTP input automatically shifts focus between the boxes. Also, it only accepts numbers as input, and you can use the tab key to navigate between boxes:

Add the Finishing Touches

The OTP input is now mostly complete, but it feels a little plain. Let’s add a last set of features:

• The input should emit the OTP value once all fields are filled.
• A small bounce animation should trigger when the user enters a value.

We’ll start with the logic for emitting the OTP value. First, you'll modify App.vue so it can display the emitted value. Replace the contents of App.vue with the following:

<template>
  <otp 
    :digit-count="4"
    @update:otp="otpValue = $event"
  ></otp>

  <p>The current OTP value is: {{ otpValue }} </p>
</template>

<script setup>
import otp from "./components/OTP.vue";
import { ref } from "vue";

otpValue = ref('')
</script>

Not much has changed: you just created a reactive variable called otpValue, told the template to render it, and added an event listener to the OTP component to update otpValue.

Next, open components/OTP.vue and add the following code just before the handleKeyDown function:

const emit = defineEmits(['update:otp']);

const isDigitsFull = function () {
  for (const elem of digits) {
    if (elem == null || elem == undefined) {
      return false;
    }
  }

  return true;
}

This code defines the custom event update:otp, as well as a function isDigitsFull . isDigitsFull returns false if there’s any null value inside digits and true otherwise.

Add the following to handleKeyDown at the end of the last if block:

if (isDigitsFull()) {
  emit('update:otp', digits.join(''))
}

Each time a digit is pressed in an input box, this code calls the helper function isDigitsFull to determine if all the input boxes are filled.

If they are, it emits the update:otp event, combines the value of all input boxes to a single string, and sends it as the value of the event.

Your rendered page in the browser should now display the most recent (complete) OTP value:

Finally, you’ll add animation to your OTP input. Paste the following CSS at the end of the style tag in components/OTP.vue:

.bounce {
  animation: pulse .3s ease-in-out alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

And then add the following class binding to the input in the template:

:class="{bounce: digits[ind] !== null}"

And that’s the code for the animation! Here’s how it works:

• The bounce class for each input is tied to digits[index]
• If the value of digits[index] changes, the expression is evaluated again
• If the new value isn’t null, the bounce class gets applied
• If it’s null, the bounce class is removed
• If the value doesn’t change, the expression isn’t re-evaluated, so the animation doesn’t trigger.

Here’s the final look of your OTP:

And you’re done!

Conclusion

In this tutorial, you learned how to build an OTP input from scratch in Vue 3. You can find the source code for this component here. I hope you enjoyed the read!

If you'd like to see more of my writing, you can follow me on Twitter.

In this tutorial, let's learn how to build dynamic forms in React. Using dynamic forms, we can add fields or remove them depending on our needs.

So, let's get started.

How to Create a Form in React

Let's create a simple form first. The syntax is straightforward:

import './App.css';

function App() {
  return (
    <div className="App">
      <form>
        <div>
          <input
            name='name'
            placeholder='Name'
          />
          <input
            name='age'
            placeholder='Age'
          />
        </div>
      </form>
    </div>
  );
}

export default App;

Here's what it'll look like:

We have two input fields, which are Name and Age. But these fields are static. So, let's made them dynamic using React States.

How to Make Forms Dynamic in React

Create one state called InputFields. It will have an object, with name and age properties.

const [inputFields, setInputFields] = useState([
    {name: '', age: ''}
])

Now, let's map our form fields from their inputFields state.

import { useState } from 'react';
import './App.css';

function App() {
  const [inputFields, setInputFields] = useState([
    { name: '', age: '' }
  ])
  return (
    <div className="App">
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                name='name'
                placeholder='Name'
              />
              <input
                name='age'
                placeholder='Age'
              />
            </div>
          )
        })}
      </form>
    </div>
  );
}

export default App;

Now, we will see only one set of input fields, because we have only one object in the inputFields state. If we add more objects, we will see multiple input fields.

How to Add the Values from inputFields State

Now, let's add the values from the inputFields state to the input fields.

import { useState } from 'react';
import './App.css';

function App() {
  const [inputFields, setInputFields] = useState([
    { name: '', age: '' }
  ])
  return (
    <div className="App">
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                name='name'
                placeholder='Name'
                value={input.name}
              />
              <input
                name='age'
                placeholder='Age'
                value={input.age}
              />
            </div>
          )
        })}
      </form>
    </div>
  );
}

export default App;

The values will be input.name and input.age.

Let's also add an onChange event that will run when we type something in the input fields.

Create a function called handleFormChange.

const handleFormChange = () => {

}

Assign this function to the input fields as an onChange event.

<div key={index}>
              <input
                name='name'
                placeholder='Name'
                value={input.name}
                onChange={event => handleFormChange(index, event)}
              />
              <input
                name='age'
                placeholder='Age'
                value={input.age}
                onChange={event => handleFormChange(index, event)}
              />
            </div>

This onChange event takes two parameters, index and event. Index is the index of the array and event is the data we type in the input field. We are passing those to the handleFormChange function.

const handleFormChange = (index, event) => {

}

But the thing is, if we try to type something in the input fields, we won't be able to. Because we haven't set the states in the formFields state. So, let's do that.

 const handleFormChange = (index, event) => {
    let data = [...inputFields];
 }

Let's store our inputFields state into a variable called data using the spread operator (the three dots ...).

Then, we will target the index of the data variable using the index parameter, and the name of the property, too.

const handleFormChange = (index, event) => {
    let data = [...inputFields];
    data[index][event.target.name] = event.target.value;
}

For example, suppose we are typing in the input field with index 0. So, we are specifying the index in data, and the property name, using event.target.name. And inside this data index, we are storing the values from input fields using event.target.value.

Now, we need to store this data back inside the inputFields array using the setInputFields method.

const handleFormChange = (index, event) => {
   let data = [...inputFields];
   data[index][event.target.name] = event.target.value;
   setInputFields(data);
}

Now, if we type something in the input fields, it will show up in the input fields.

How to Add More Form Fields

Let's create a button to add more form fields.

<button>Add More..</button>

And a function, too, that will be triggered when this button is clicked.

const addFields = () => {

}

Let's add the function to the button via an onClick event.

<button onClick={addFields}>Add More..</button>

Now, in the addFields function, we need to create an object. And every time we click the button, it will be pushed to the inputFields state, thus creating a new input field.

const addFields = () => {
    let newfield = { name: '', age: '' }
}

Then set this newField inside the inputFields state.

const addFields = () => {
    let newfield = { name: '', age: '' }

    setInputFields([...inputFields, newfield])
}

Here, we are also setting the existing inputFields using the spread operator, in conjunction with the newfield.

If we click the Add Field button now, it will create a new input field.

How to Create a Submit Button

Let's create a Submit button and one function to see our data when we submit the form.

<button>Submit</button>

We also need a function that will be triggered when we click this button. It will log the data in the console, from the input fields. It also has a method called e.preventDefault() that will prevent the page from getting refreshed.

const submit = (e) => {
    e.preventDefault();
    console.log(inputFields)
}

Add this function to the Submit button:

<button onClick={submit}>Submit</button>

And also in the form tag:

<form onSubmit={submit}>

If we submit, we will see our data in the console:

How to Remove the fields using a Remove Button

Now let's create a Button for removing these fields if we don't want them.

<form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                name='name'
                placeholder='Name'
                value={input.name}
                onChange={event => handleFormChange(index, event)}
              />
              <input
                name='age'
                placeholder='Age'
                value={input.age}
                onChange={event => handleFormChange(index, event)}
              />
              <button>Remove</button>
            </div>
          )
        })}
      </form>

We need a function as well.

const removeFields = () => {

}

So, assign this function to the Remove button.

<button onClick={() => removeFields(index)}>Remove</button>

We are passing the index as a parameter, which is the index of input fields.

Then, receive this index in the function.

const removeFields = (index) => {

}

And just like before, we need to create a new variable and store the inputFields state in that new variable.

const removeFields = (index) => {
    let data = [...inputFields];
}

Then, we need to splice this data variable by the index. Then we need to store it in the inputFields state using setInputFields.

const removeFields = (index) => {
    let data = [...inputFields];
    data.splice(index, 1)
    setInputFields(data)
}

Now, if we click remove, it will remove that form field.

So we have five input fields here, with five different names. Let's remove the input of Nishant.

You see it has been removed. And if we submit, we will see our updated data in the console.

Wrapping Up

Now you know how to create dynamic forms in React. Congrats!

You can also watch my video on the same topic Dynamic Forms - How to Add Dynamic Forms in React.

Try out the code here – https://github.com/nishant-666/Dynamic-Forms.

Happy learning :)

Web forms play an important role on many sites on the internet, and they're something you should know how to build as a web developer.

From good ol' login forms to signup forms and survey forms (or whatever they're called these days), their main purpose is to receive data and send them to a backend server where they're stored.

In this article, we're going to see how we can convert the data gotten from a form from one type to another with JavaScript. But, before you read this article any further, you should have an understanding of the following:

• The basics of React.js
• How to preserve form state in React.js
• How to create controlled input components

Also, in this article, we'll be covering:

• How to send the form data that you obtain to a backend server through an API
• How to get the exact value of a label in the options array of the react-dropdown-select package.

Now that you know what you need to get started with this article, let's dive in.

Getting Started

We'll be building a simple form with React in this article so we can understand how the process works. To do that we'll be using Next.js to bootstrap our application. If you're new to Next.js, you can take a look at their documentation here.

Now let's get all the dependencies that we'll be needing in this project. Since it is a Next.js project, let's start by setting up a next-app:

npx create-next-app name-of-your-app

The command above will install all important dependencies that we need in a Next.js app function. The next dependencies that we need in this project are:

• xios for data fetching, and
• styled-components to style the app.

The command below does that for us:

npm install styled-components react-dropdown-select axios --save-dev

A typical Next.js project structure is different from that of create-react-app. To keep this article concise, we won't be going over the full application structure – we'll only be focusing on what applies to us.

That being said, let's take a look at the app structure below:

|__pages
|   |-- _app.js
|   |-- index.js
|__src
|   |__components
|   |    |__role
|   |    |   |__style
|   |    |     |-- role.styled.js
|   |    |__index.js        
|   |
|   |__containers
|   |    |__dropdown-select 
|   |        |-- index.js
|   
|__

Overview of the app structure

In the last section, we got the required dependencies for this project. In this section, we'll be looking at the project structure and the function that each file performs.

The pages directory is where all the routing of the app takes place. This is an out-of-the-box feature of Nextjs. It saves you the stress of hard-coding your independent routes.

pages/api: this API directory enables you to have a backend for your Next.js app. inside the same codebase. This means you don't have to go through the common way of creating separate repositories for your REST or GraphQL APIs and deploying them on backend hosting platforms like Heroku, and so on.

With the API directory, every file is treated as an API endpoint. If you look at the API folder, you'll notice that we have a file called user.js in it. That file becomes an endpoint, which means an API call can be performed using the path to the file as the base URL.

pages/_app.js is where all our components get attached to the DOM. If you take a look at the component structure, you’ll see that all the components are passed as pageProps to the Component props too.

It is like the index.js file when using Create-React-App. The only difference here is that you are not hooking your app to the DOM node called “root”

React.render(document.getElementById("root"), <App />)

index.js is the default route in the pages folder. That is where we'll be doing most of the work in this project. When you run the command below, it starts up a development server and the contents of index.js are rendered on the web page.

components/role is the component file that houses the dropdown select component and its style

And lastly, containers/dropdown-select is where we're building the form component.

How to Build the Form and Manage State

Now that we have seen some of the basic functions of the folders/files in the app, let's start building the form component. We won't be focusing on writing the styles in this article.

The code snippet below shows the basic structure of the form component without the state variables. We'll take a step-by-step approach to understanding what is going on in the snippet.

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";
import axios from "axios";

const AuthForm = styled.form`
    ...
`;

const DropDownSelect = () => {
  return (
    <AuthForm onSubmit="">
      <h2>Register an Account...</h2>
      <InputGroup>
        <label htmlFor="email">Email address</label>
        <input
          name="email"
          id="email"
          type="email"
          placeholder="Enter email address"
          className="inputs"
        />
      </InputGroup>
      <InputGroup>
        <label htmlFor="password">Create password</label>
        <input
          name="password"
          id="password"
          type="password"
          placeholder="Create password"
          className="inputs"
        />
      </InputGroup>
      <Role />
   </AuthForm>
  );
};

export default DropDownSelect;

The component above doesn't have any means of tracking the input that the user types into the form fields, and we do not want that. To get that sorted out, we'll make use of React's useState() hook to monitor the state

Let's start by creating the state variables. You'll notice that we have three input fields in the component, so that means we'll have to create three state variables.

 const [email, setEmail] = React.useState("");
 const [password, setPassword] = React.useState("");
 const [role, setRole] = React.useState();

But we need a way to track the state of the data we're sending to the backend server, so we need another state variable to monitor the status of our asynchronous data fetching (POST) request.

A very popular pattern in the React ecosystem is to create a loading component that'll indicate this process.

const [loading, setLoading] = React.useState(false);

Now that we have this in place we can set up our input fields to be controlled using the onChange() prop.

<input
  name="email"
  id="email"
  type="email"
  placeholder="Enter email address"
  className="inputs"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

The process is then repeated for the remaining input fields. But, there's a catch. You'll notice that we already imported the <Role /> component and we already passed some pre-defined props to the component. Let's take a look at the component itself before we go too deep.

The Role Component

This component utilizes the react-dropdown-select package for its functionality, it takes in an array of values into its properties.

The least required prop is the options prop which receives an array of objects with label and value keys

const options = [
   { label: "Manager", value: "Manager" },
   { label: "Worker", value: "Worker" }
]

Let's have a look at the component below:

import React from "react";
import { InputGroup } from "./style/role.styled";
import Select from "react-dropdown-select";
import propTypes from "prop-types";

const Role = ({ userRole, roleChange }) => {
  const options = [
    { label: "Worker", value: "Worker" },
    { label: "Manager", value: "Manager" },
  ];

  return (
    <React.Fragment>
      <InputGroup>
        <label htmlFor="fullname">Role</label>
        <Select
          value={userRole}
          options={options}
          placeholder="Please select your role"
          required={true}
          dropdownPosition="top"
          className="select"
          color="#ff5c5c"
          onChange={roleChange}
        />
      </InputGroup>
    </React.Fragment>
  );
};

export default Role;

Role.propTypes = {
  ...
};

I mentioned before that the <Role /> component has its own custom props, and you can see that above.

The component takes in two props: userRole that tracks the input based on the option that user selects, and the roleChange prop that gets passed as a value to the onChange() property of the <Select /> component.

The <Select /> component has various props that you can pass to it. From the dropdownPosition prop that specifies where the options menu is positioned on the page, to the color prop that affects the style of the items in the options menu, and so on. You can take a look at some of them here.

We made an import statement that brings in the React "prop-types" module at the top of this component's file. We'll be using this module to validate the type of data that is passed into this component.

Role.propTypes = {
  userRole: propTypes.array.isRequired,
  roleChange: propTypes.func.isRequired,
};

From snippet above, we stated that the type of data that will be passed into userRole as a value must be of a JavaScript array data-type and roleChange is required to be a function. Anything other than these will result in an error.

How to Use the Role Component

Now that we have gone through the <Role /> component and learned how it works, let's take a look at how we can use it in the app below:

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";

const AuthForm = styled.form`
 ...  
`;

const DropDownSelect = () => {
  const [role, setRole] = React.useState();

  return (
    <AuthForm onSubmit={handleSignUp}>
      <h2>Register an Account...</h2>
      // previous details    
      <Role
        userRole={role}
        roleChange={(role) => setRole(role.map((role) => role.value))}
      />
   </AuthForm>
  );
};

export default DropDownSelect;

The snippet above shows how the <Role /> component is being used. You can see the custom props in use too. userRole is assigned the role state value.

You may have been wondering why we did not assign any value to the role state value we declared it. Well, that's because the <Select /> component from react-dropdown-select has a default data-type value of an array, so there's no need to set an array in the useState() hook.

The roleChange prop looks totally different from the previous way we have been using the onChange prop in the input fields. Here, we had to place the items we needed into a separate array, so that we're able to get the exact data when the user selects an option.

roleChange={(role) => setRole(role.map((role) => role.value))}

If you can recall, we had an array called options which had key value pairs of label and value. The snippet above helps us place the value key into an entirely new array since that is what we need, and this is possible with the inbuilt map() method of JavaScript.

When the user clicks on any option, we'll be getting an array containing just one item that was selected. Say, for example, the user clicks on the "Worker" option, the value that is stored in form state is: ['Worker'].

But we do not want this data type to be sent to the server – we want a string instead. How then do we fix this, you might ask? We'll see how we can do that in the next section.

How to Send the Form Data to the Server

In the previous sections, learned about the structure of a Next.js app and how to build and manage state in a React form.

In this section, we'll be sending the data that we obtained from the form to the backend server via an API.

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";
import axios from "axios";

const AuthForm = styled.form`
  ...
`;

const DropDownSelect = () => {
  ...
  const [loading, setLoading] = React.useState(false);

  const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      setLoading(true);

      const response = await axios({
        method: "POST",
        url: "https://your-api-endpoint.com",
        data: {
          email,
          password,
          role: role.toString(),
        },
        headers: {
          "Content-Type": "application/json",
        },
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <AuthForm onSubmit={handleSignUp}>
      <h2>Register an Account...</h2>
      // form feilds
      <button className="btn">{loading ? "Registering" : "Register"}</button>
    </AuthForm>
  );
};

export default DropDownSelect;

We'll be focusing on the asynchronous data call function, handleSignup, which we'll be using to send the data to the server through the API endpoint.

const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      setLoading(true);

      const response = await axios({
        method: "POST",
        url: "https://your-api-endpoint.com",
        data: {
          email,
          password,
          role: role.toString(),
        },
        headers: {
          "Content-Type": "application/json",
        },
      });
    } catch (error) {
      console.log(error);
    }
  };

The initial value of the loading state was set to be false, but in the try block, it is true. This means that, if the asynchronous data call is going on, the loading value should be true. If not, it should be false.

We mentioned before that we do not want to send an array data type as an input value to the server. Instead we want a string. We do this by using the native string method [toString()] of JavaScript to transform this data type.

data: {
  role: role.toString()
}

The loading state value can be seen in action below. We're using a ternary operator to check if the loadin state variable is true. If Yes, the text in button will be "Registering". If No, the text remains unchanged.

<button className="btn">{loading ? "Registering" : "Register"}</button>

You can play with the snippet below to confirm if the result is accurate or not.

const options = [
   { label: "Worker", value: "Worker" },
   { label: "Manager", value: "Manager" }
]

// create a new array with the key value that you want
const mappedOptions = options.map(option => option.value)
console.log(mappedOptions) // ['Worker', 'Manager']

// convert the mapped option array to a string value
const mappedOptionsToString = mappedOptions.toString()
console.log(mappedOptionsToString)

Conclusion

If your backend API lets you send an array data-type as a value from an input field, you can use what you have learnt here, because the react-dropdown-select package allows you to do that.

But in scenarios where the value that is required from your input field is a string, then you can consider using the native toString() method of JavaScript as you wish.

Here's the link to the deployed demo app and a GIF that shows you what it looks like with all the styles applied:

Thank you for reading this article. If you've found it helpful, kindly share it with your peers.

Let's get started!

What are Web Forms?

Forms are an efficient way of gathering information.

There are many cases where you would need to fill out a physical form, a printed physical document, and give out personal details.

For example, you may fill out a form and hand it to someone when you're starting a new job, or when you're going for a medical checkup, or when you are in the process of renting/buying a house – or any other time when paperwork is necessary.

Just like physical forms, online digital web forms are a way to receive and collect input, information, and important data from users and visitors, using a combination of web technologies.

A web form mimics a physical form by containing spaces for users to fill out their information.

Web forms use a variety of tools, or form controls, to collect user input.

A website can have a search box, or a text input field, for entering a single line of text. This enables users to search for something specific.

A website can also contain a registration form that lets users sign up for a newsletter or other updates.

That would typically contain a text input field for entering the user's first name, last name, and email address.

Many websites also have sign-up / sign-in forms when making an online purchase, for example, where users enter their username in a text field and their password in a separate field. Although password fields are also text fields, each text character is covered up by a black dot to hide what is being typed.

A website can also have a larger textarea for users to enter longer passages of text, which is useaful for leaving a comment underneath a blog post.

Many forms also allow the user to choose a particular option from a number of options by selecting a radio button. They can allow the user to choose more than one option by checking/unchecking a checkbox.

Lastly, all forms have a submit button, to submit the data to a server where it will be stored or processed.

How Web Forms Work

The Internet is a large global network that connects millions of computers all around the world.

Computers that are part of the network communicate with each other by sending and receiving information.

The way this is achieved is thanks to the web's client/server request/response architecture.

The client, which is typically a web browser such as Google Chrome, sends a request to a web server.

A web server is a piece of computer hardware or software that stores files that make up websites and distributes them whenever it receives a request to do so.

The request could be to view a form that's part of a webpage.

The server sends back the files that make up the web form as a response. The web browser then assembles the files together and the user views the form in the web browser.

This request/response cycle is structured by a protocol, called HTTP (which stands for HyperText Transfer Protocol).

So, when using a web form, a user enters the necessary data. Then after the client-side validation that checks if all required fields are filled out and whether the data is of the right format, the user clicks the submit button.

The data is then sent to the server in name-value pairs in an HTTP request. This method of organizing information in name-value pairs makes sure that the correct data corresponds to the correct form element.

Then a server-side language such as PHP, Ruby, or Python is used to process the information and store it in a database for later use or retrieval.

How to Create Web Forms in HTML

To create a form in HTML, you need to use the <form> element which is used for collecting information.

The <form> element has an opening <form> and closing </form> tag.

<!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>Web form</title>
</head>
<body>
    <form>

    </form>
</body>
</html>

The <form> element takes two attributes:

• The action attribute, which specifies the URL where you want the data to be sent and processed.
• The method attribute that accepts as a value one of two HTTP verbs, either GET or POST. If no method attribute is included, the GET method is used by default.

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">

    </form>
</body>
</html>

However, this alone does not collect any user input.

What is the HTML input element?

The <input> element is most commonly used for collecting and retrieving user data from a web form.

It's where users enter their data.

It's nested inside the <form> element and it's a self closing element. This means it does not require a closing tag. (Closing tags have a forward slash, </>.)

You use it to create different styles of input fields, or form input controls, for users to enter a variety of different kinds of information.

It creates textfields, email fields, password fields, checkboxes, radio buttons, drop-down menus, submit buttons, the ability to select and upload files and images from the user's computer, and much more.

The way to determine the type of input field, or form input control, is to set the type attribute and assign it a value.

The general syntax of <input> looks something like this:

<input type="value"> <!-- the value of the type attribute determines the style of input field -->

For example, to create a field that allows users to upload a file, the <input> element would look like this:

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <input type="file">
    </form>
</body>
</html>

The type attribute determines what kind of data the input element can accept.

How to Create an HTML Text Box Input Field

The default value of input's type attribute when not specified is text. So text input is the most common style of input.

The line <input type="text"> creates a single line text input field, where the user can type any text input.

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter some text below:</p>
        <input type="text">
    </form>
</body>
</html>

When you view the page in the browser, you can see that a single line text input field has been created:

How to Add Placeholder Text to a Text Field

Placeholder text, also called filler text, is a way to prompt and give a hint to users as to what kind of information they need to fill out in the form. It can also offer a default value before they start typing.

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first and last name:</p>
        <input type="text" placeholder="John">
        <input type="text" placeholder="Doe">
    </form>
</body>
</html>

The code from above would result in the following:

The Importance of the name attribute in Text Fields

When submitting the form and sending it to the server, the server needs to distinguish and differentiate between the different kinds of submitted data it gathers.

For example, it needs to know which is the username, which is the password, and which is the email address.

This means that each text field needs a name attribute and a value to make the type of data submitted clearer.

For example, you could use the following to prompt someone to enter their full name in a text field:

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your full name:</p>
        <input type="text" name="name" placeholder="John Doe">
    </form>
</body>
</html>

Say the user enters the name "John Bexley" in the text field. This will then become the value of the name attribute.

As mentioned earlier, the data in forms is sent in name-value pairs. In this case, the server would know that the name of the user is John Bexley, specifically it would look like name=John Bexley.

To give another example:

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  name:</p>
        <input type="text" name="first_name" placeholder="John">
        <p>Please enter your last  name:</p>
        <input type="text" name="last_name" placeholder="Doe">
    </form>
</body>
</html>

The code above has two separate text fields for the user to enter their first name and last names separately.

If they entered "John" as the first name, the name-value pair sent to the server would be first_name=John".

If they entered "Bexley" as the last name, the name-value pair sent to the server would be last_name=Bexley.

How to Make Text Information Required

You can make it so certain fields are required and need to be filled in by users.

HTML5 introduced client-side validation.

This is a feature where a message is displayed if the user has not filled in the required fields or has not entered information correctly. It also means that they won't be able to submit the form.

All you need to do to enable this is to add the required attribute to the <input> element. This attribute does not need to have a value.

Keep in mind that when adding multiple attributes to the <input> element, you don't have to add elements in a certain order.

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  and last name:</p>
        <input type="text" name="first_name" placeholder="John" required>
        <input type="text" name="last_name" placeholder="Doe" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Look at what happens if a user does not fill in one of the fields:

A message will appear and the user won't be able to submit the form if the required fields have not been completed.

How to Set a Minimum and Maximum Number of Characters in a Text Box

You can specify the minimum and maximum number of characters that a user can enter in a text field.

To create a minimum number of characters, use the minlength attribute.

For example, you can have it so a user's username is at least three characters long:

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

The user will not be able to submit the form if the username is shorter than three characters:

To limit the number of characters a user enters in a text field, use the maxlength attribute.

An example of combining both the minlength and maxlength attributes could look like this:

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

In the example above, a user's username has to be at least 3 characters long and no longer than 20 characters.

How to label Form Controls

So far I've been using a <p> element to write some text before the text box, in this way prompting the user and letting them know what they need to enter.

But this is not a best practice and is not accessible.

Each form control, in this case each text field, should have its own <label> element.

This makes the form accessible for visually impaired users that use assistive technologies such as screen readers.

One way to use it is to nest any introductory text and the <input type="text"> in a <label> element like so:

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label>
            Please enter your username
            <input type="text" name="username" minlength="3" maxlength="20" required>
        </label>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Another way to use the <label> element and to have the same result is to separate it from the <input> element.

In this case, the for attribute needs to be added to <label>, and the id attribute added to <input>, in order to associate both with one another.

The value of for will be the same with id.

<!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>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label for="username"> Please enter your username:</label>
            <input type="text" id="username" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Conclusion

To sum up, to create a text input field in HTML, you need at least:

• An <input> element, which typically goes inside a <form> element.
• To set the type attribute to have a value of text. This will create a single line text input field.
• Don't forget to add a name attribute. This identifies information for each form control that gets created and makes things clearer for the server.

To learn more about HTML and CSS, check out the Responsive Web Design Certification by freeCodeCamp, where you'll learn in an interactive way while building fun projects along the way.

Thanks for reading and happy coding!