NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • The necessary attributes
  • The method attribute
  • The action attribute
  • The name attribute
  • Putting it together
  • Next steps
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript
  3. HTML

HTML Forms

PreviousTag AttributesNextBrowser Inspector

Last updated 1 year ago

An HTML form allows users to submit data to a server for processing. Let's add some functionality to our previous HTML form to allow queries to Google Search.

The necessary attributes

First, we need to add some attributes to the <form> tag. But what attributes does it accept? Let's look at two of them.

The method attribute

This specifies the HTTP request method to use. By default, this method is "GET", but there are 4 other possibilities: "POST", "DELETE", "PUT" and "PATCH". In our case, Google Search expects a GET request, so the "GET" value is fine. This means we do not need to specify a method this time.

The action attribute

This attribute specifies the URL to submit the form data to. Let's figure out what the action URL should be for our form.

Go to the and enter some search query. Then look at the URL bar and see what address it went to.

Ignore everything after the ? in the URL bar; these are the search parameters and will be used later.

<form action="https://www.google.com/search">...</form>

The name attribute

This attribute is given to an input field, and specifies the name of the input parameter. In this case, what name do we give our input?

Consider the URL bar again. Right after the ?, you should see something along the lines of q=whateveryoutyped.

This is how form data is arranged in a GET request. The name of the parameter, following by an equals sign =, followed by the value of the parameter itself. For multiple parameters, they are separated by ampersand symbols &. In general, in a GET request, the URL bar looks like this:

https://www.domain.com/action-url?name1=value1&name2=value2&name3=value3

For Google Search, most of the parameters are for Google's internal service: type of browser, operating system, cookies, google account signed in, etc. But the one we want is the first one: q=

Here q is the name of the parameter, and it stands for (presumably) query. Whatever you searched up would be the value. So now we know what name to give our <input> field:

<input name="q" placeholder="query" required>

Putting it together

Your form by now should look like this:

<form action="https://www.google.com/search">
    <input name="q" placeholder="query" required>
    <button type="submit">Submit</button>
</form>

Once you reload the page, you won't notice any visible changes. But when you enter a query into the form field, you'll be redirected to a Google Search page for the query as below.

Next steps

We're pretty much done with HTML for now. The next section of the guide will explain a little about the Browser Inspector in Firefox, a tool that will be very useful when we move on to CSS right after.

As we see above, the URL it went to was . Hence this is the URL we need to submit our form data to. Let's add this attribute to our <form> tag:

https://www.google.com/search
Google homepage