What are the Different Parts of HTML Text Input Elements For (in React and normal HTML)?

Silhouette of girl on purple and red sunset.

The HTML “text” input


For a text input, the name is part of the data sent to the server when the form is submitted. The name is paired with the input’s value, and these are sent to the server in the form name=Chris (if your input value was “Chris”).


The value of an input is the actual input text. If value is set equal to a string as an attribute to the input element in standard HTML, we won’t be able to change the input. If we are using React, we usually want to set the value equal to some state, and then change the state using the onChange attribute, like so:

import { useState } from 'react'

export default function InputTest(){
  const [nameValue, setNameValue] = useState('Chris')
        onChange={(e) => {


The id attribute works as a standard id attribute. It can be used to set styles or to identify the input as a unique item on the page.


placeholder is simply the text that is shown in light grey in the input before the user starts typing, to help guide their input. For example, for a name input, “First and Last Name…”, or “John Smith”

Image by Sasha Freemind on Unsplash

Subscribe to new blog posts