Text input

2 snippets across 2 stacks — HTML & CSS, React

HCHTML & CSS

Text Inputs

syntax

<input type="text|email|password|url|search|tel" name="field" id="field">

example

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username" maxlength="30" required>

<label for="user-email">Email:</label>
<input type="email" id="user-email" name="email" autocomplete="email">

Note Different type values trigger different mobile keyboards and built-in validation. For example, type="email" shows an @ key on mobile and validates email format.

REReact

Controlled Inputs

RE · Forms

syntax

<input value={state} onChange={e => setState(e.target.value)} />

example

function EmailInput() {
  const [email, setEmail] = useState('');
  const isValid = email.includes('@') && email.includes('.');

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        className={isValid ? 'valid' : 'invalid'}
      />
      {!isValid && email.length > 0 && (
        <small>Please enter a valid email address</small>
      )}
    </div>
  );
}

Note Controlled inputs keep React as the single source of truth. The value prop locks the input to the state. If you set value without onChange, the input becomes read-only.