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

The HTML “text” input

name

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”).

value

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')
  return(
    <>
      <input 
        value={nameValue}
        onChange={(e) => {
          setNameValue(e.target.value)
        }}
      />
    </>
  )
}

id

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

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