LogoLogo
  • FAC Curriculum
  • archive
    • Node & npm introduction
    • developer
      • Programming Paradigms
    • handbook
      • Asking for help
      • Coaching groups
      • Code review
      • Course rules
      • Debugging
      • Employment schedule and material delivered in FAC20
      • GitHub Workflow
      • Glossary or terms
      • Presentation Guidance
      • Equality, Diversity and Inclusion
      • Installation guide
      • Learning circles
      • Mentoring guidance
      • What to expect from your mentors
      • One-day projects
      • Pair programming
      • Portfolio
      • Questions for problem solving
      • Progress Logs
      • Final project report
      • Managing software projects
      • Project Presentations
      • Project roles
      • Projects
      • Retrospectives
      • Role Circles
      • Safeguarding policy
      • Technical Spikes
      • System requirements
      • Tech for Better
      • User Manuals
      • Wellbeing Support
      • project-docs
        • What makes a mentor?
        • Product Handover
        • Sprint Planning
        • Tech for Better Presentations
        • User Research & Usability Testing
    • foundation
      • full-stack
        • Learning Outcomes
        • project
      • testing
        • project
        • spikes
  • docs
    • Contributing to the curriculum
    • Curriculum intent
    • Curriculum process
  • src
    • About our curriculum
    • course
      • Code of Conduct
      • Docker
      • .NET and Umbraco
      • Getting started
      • Founders and Coders coursebook
      • KSB's
      • Mini projects
      • Revision checklist
      • Svelte
      • TypeScript
      • handbook
        • Software Developer Handbook
        • Software Foundation Handbook
      • precourse
        • Before you start the course
        • Installation List
      • syllabus
        • developer
          • app
            • learning-outcomes
            • project
            • schedule
            • spikes
          • introduction
            • learning-outcomes
            • project
            • resources
            • schedule
          • week00-pre-course
            • We'd like you to spend some time before starting the course working on useful fundamentals.
            • spikes
          • week01-project01-basics
            • Employability introduction
            • Homework
            • learning-outcomes
            • Week of September 9th
            • project
            • resources
            • schedule
            • spikes
          • week02-project02-chatbot
            • employability
            • Homework
            • learning-outcomes
            • Week of September 16th
            • project
            • resources
            • schedule
            • spikes
          • week03-project03-server
            • Learning Outcomes
            • Week of September 23th
            • The Amazin' Quizzer API Backend
            • resources
            • schedule
          • week04-project03-frontend
            • learning-outcomes
            • Week of September 30th
            • UI for Quizzer App
            • resources
            • schedule
          • week05-project03-test-deploy
            • Testing and deployment
            • Week of October 7th
            • project
            • resources
            • schedule
          • week06-project04-databases
            • learning-outcomes
            • Week of October 14th
            • project
            • Databases
            • schedule
          • week07-project04-authentication
            • Learning Outcomes
            • Week of October 21st
            • project
            • resources
            • schedule
          • week08-project04-test-deploy
            • Learning Outcomes
            • Week of October 28th
            • project
            • resources
            • schedule
          • week09-reading-week
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
          • week10-project05-DOTNET-intro
            • Learning Outcomes
            • overview
            • project
            • Resources
            • schedule
          • week11-project05-DOTNET-testing
            • Testing and deployment
            • Week of November 18th
            • project
            • Resources
            • schedule
          • week12-project05-DOTNET-deploy
            • Learning Outcomes
            • Week of November 25th
            • project
            • Resources
            • schedule
            • Spikes
          • week13-TFB-design
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Design Week Spikes
          • week14-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • DevOps Resources
            • schedule
            • Spikes
          • week15-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Spikes
          • projects
            • in-house-design
              • Learning Outcomes
              • Project
              • Resources
              • schedule
              • Design Week Spikes
        • foundation
          • Obsolete-full-stack
            • project
          • post-course
            • Homework
            • schedule
        • portfolio
          • fruit-shop
            • learning-outcomes
            • project
            • resources
          • game
            • learning-outcomes
            • project
            • resources
          • hobby-page
            • learning-outcomes
            • project
            • resources
          • movie-data
            • learning-outcomes
            • project
            • resources
          • project-gallery
            • learning-outcomes
            • project
            • resources
          • website
            • learning-outcomes
            • project
            • JavaScript
        • tfb
          • week 1
            • Introduction (45 minutes)
            • Further reading
          • week 10
            • content
            • resources
          • week 11
            • What will we be doing this week?
            • resources
          • week 12
            • What will we be doing this week?
            • Further reading
          • week 2
            • Discover (90 minutes)
            • resources
          • week 3
            • content
            • resources
          • week 4
            • Mapping the user journey (90 minutes)
            • resources
          • week 5
            • Figma Workshop 1 (90 minutes)
            • Further reading
          • week 6
            • Figma Workshop 2 (90 minutes)
            • resources
          • week 7
            • Product pitches & Selection (90 minutes)
            • resources
          • week 8
            • content
            • resources
          • week 9
            • content
            • resources
    • learn
      • DOTNET
        • Introduction to .NET
      • auth
        • Authenticating web apps
      • database
        • Persisting data with SQLite and Node
      • dotnet-two
        • Dependency injections and interfaces in .NET
      • form-validation
        • Form validation
      • react
        • Building client-side apps with React
      • server
        • HTTP servers with Node & Express
      • typescript
        • TypeScript
    • mentoring
      • design-week
        • Analysis Workshop
        • Code planning
        • Definition Workshop
        • Discovery Workshop
        • Figma introduction
        • Usability testing
        • User Research
    • resources
      • http
        • introduction
    • workshops
      • cookie-auth
        • index
      • creating-promises
        • index
      • css-layout
        • index
      • cypress-testing
        • index
      • database-testing
        • index
      • dev-tooling
        • Developer tooling
      • dom-challenge
        • index
      • dom-rendering
        • index
      • es-modules
        • index
      • express-middleware
        • Express middleware
      • first-class-functions
        • index
      • form-validation
        • index
      • functions-callbacks-async
        • Functions, callbacks, & async JavaScript
      • git-intro
        • Introduction to Git
      • git-terminal
        • Using Git in the terminal
      • git-workflow
        • Git workflow
      • github-projects
        • GitHub Projects Workflow Workshop
      • heroku-sql-challenge
        • index
      • html-forms
        • index
      • learn-a11y
        • index
        • starter-files
          • solution
            • Accessibility solution explanation
      • learn-fetch
        • index
      • learn-integration-testing
        • index
      • learn-testing
        • Learn testing in JavaScript
      • learn-unit-testing
        • index
      • node-error-handling
        • Node error-handling
      • node-express-server
        • Node and Express HTTP server
      • node-npm-intro
        • Node & npm introduction
      • node-postgres
        • Learn Postgres with Node
      • node-scripting-challenge
        • index
      • password-security
        • index
      • promise-practice
        • index
      • react-components
        • React components
      • react-fetch
        • index
      • react-forms
        • React forms
      • react-refactor-classes
        • index
      • react-state-effects
        • React state & effects
      • real-world-fetch
        • index
      • scope-challenge
        • Scope debugging challenge
      • semantic-html
        • index
      • server-side-forms
        • Server-side forms
      • session-auth
        • Session authentication
      • sql-intro
        • index
      • tdd-array-methods
        • index
Powered by GitBook
On this page
  • How forms work
  • Inputs
  • Form submission
  • Workshop
  • Part One: basic request
  • Part Two: different input types
  • Part Three: using radio groups
Export as PDF
  1. src
  2. workshops
  3. html-forms

index

Learn how to use forms to send requests and submit user data.

Previoushtml-formsNextlearn-a11y

Last updated 4 years ago

Forms are the building blocks of interactivity on the web. They allow websites to send requests to servers without requiring any client-side JavaScript.

How forms work

You create a form with the <form> element. This is a container for all the different types of inputs your users will interact with.

Forms can contain any number of elements that allow user input (e.g. <input>). Users can enter values into these fields, then submit the form. The browser will then make a request to a new page that you specify, sending all the data from the form.

Inputs

The humble <input> element can be used to render many different types of input.

Different input types

There are many different types of input to cover all the various kinds of data you might want to collect from a user. You can see the full list and read more about each .

  • <input type="text">

    Basic single line text input.

  • <textarea></textarea>

    Allows multiline text input.

  • <input type="email">

    Shows a special keyboard with the @ symbol on some phones. Also validates that the user entered an email on submission.

  • <input type="checkbox">

    Used for turning specific values on or off.

  • <input type="radio">

    Used for selecting one value out of a group of options.

Form submission

Forms can also contain button elements. By default clicking them will submit the form. It's generally a good idea to explicitly add type="submit" to your submit buttons (even though it's the default). That way it's obvious to other developers what the button does.

The action attribute

When submitted a form will send a request to the URL in its action attribute. This can be a relative URL within the same site (e.g. /submit) or an external URL to another site (e.g. https://example.com/submit).

This request is a standard GET request, just like when you type a URL manually (or click a link). When the browser receives a response to the request it will render that as a new page (just like when you click a link).

Submitting user data

All inputs with a name attribute within your form will be submitted. By default they'll be sent as the "search" part of the URL (often called the "querystring". It's the bit after the "?" at the end).

It will be structured like this:

example.com/submit?name=value&other-input=other-value

Each field is represented with its name and value separated by an ampersand (&).

Some input types submit differently. For example a checkbox can either checked or not. If it is unchecked it won't be sent at all. If it is checked but has no value attribute then it will be sent as name=on. If it has a value attribute that will be used instead. E.g.

?marketing-consent=my-value

Radio buttons are designed to select one value out of a set of options. A group of radios should use the same name to link them together. They should each have unique value attributes. The value of the selected radio will be submitted. E.g.

?contact-method=email

Workshop

Part One: basic request

  1. Open workshop/index.html in your editor

  2. Add a form to the page containing a text input

    • This should submit a name value

    • Don't forget inputs need labels!

  3. The form should submit to "https://learn-forms.netlify.com/submit/part1"

  4. The response will tell you whether you successfully submitted a name

Part Two: different input types

  1. Change your form to submit to "https://learn-forms.netlify.com/submit/part2"

  2. Add fields for:

    • an email address

    • a telephone number

    • a textarea for a message

    • a marketing-consent checkbox

  3. The data submitted should look something like this:

    name=Oli
    email=hello@oliverjam.es
    telephone=0123455678
    message=Hello this is a message!
    marketingConsent=on

Part Three: using radio groups

  1. Change your form to submit to "https://learn-forms.netlify.com/submit/part3"

  2. Add a group of three radios that allow the user to choose their preferred contact method (email, phone, post)

  3. The extra data submitted should look like this (if email was selected):

    contact=email
example 1
example 2

You can read more

example 3
in the MDN input article
about radio groups on MDN