Demon Tech Roadmap

HTML

HTML Input Attributes

HTML input attributes enforce rules and add hints to fields.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML input fields accept attributes that dictate how they behave. The `placeholder` attribute provides a hint inside an empty field. The `required` attribute stops the form from submitting until the field is filled.

Syntax

1<!-- input attributes -->
2<input type="text" placeholder="Name" required maxlength="10">

Example

1<!-- this applies input attributes -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Input Attributes</title>
8  </head>
9  <body>
10    <form>
11      <input type="text" name="user" value="John" readonly>
12      <input type="number" min="1" max="5">
13    </form>
14  </body>
15</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

Attributes configure input restrictions.
The `placeholder` shows temporary hint text.
The `required` prevents empty submissions.
The `readonly` locks the input value.

Up Next

Continue your journey with the next topic.

Go to HTML Canvas ❯