FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Attributes

Intermediate

HTML Input Attributes

Learn type, name, value, placeholder, min, max, step as part of the HTML attribute system: what they configure, where they belong and which mistakes to avoid.

Inputs

Input attributes shape what users can type and what the browser can help with.

Input elements are flexible because attributes define their behavior. A text input, email input, checkbox, date picker and number field can all use the same input element with a different type.

The right input attributes reduce mistakes before the server ever sees the form.

Attribute group: type, name, value, placeholder, min, max, step. Attributes that shape input fields, keyboard behavior and submitted data.

What belongs here

Learn attributes by purpose, not by memorizing random names.

type

Controls the kind of input and often the mobile keyboard.

name

The key used when the form submits data.

value

The current or default value.

placeholder

Short hint text, not a replacement for a label.

min, max, step

Number, date or range constraints.

autocomplete

Hints what browser autofill should use.

Syntax in context

Input type changes browser behavior.

Choose the input type that matches the data. Do not use text for everything.

<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

<label for="age">Age</label>
<input id="age" name="age" type="number" min="16" max="99">

Good versus weak

Small attribute choices can change behavior, accessibility and security.

Good

<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

<label for="age">Age</label>
<input id="age" name="age" type="number" min="16" max="99">

Weak

<input type="text" placeholder="Email">
<input type="text" placeholder="Phone">
<input type="text" placeholder="Age">

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

<label for="age">Age</label>
<input id="age" name="age" type="number" min="16" max="99">
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="demo-card">
  <form>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" required>
    <label for="lessons">Lessons per week</label>
    <input id="lessons" name="lessons" type="number" min="1" max="5" value="2">
    <button type="submit">Plan lessons</button>
  </form>
</main>

<style>
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.content-panel {
  margin-top: 18px;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
iframe { width: 100%; min-height: 180px; border: 1px solid rgba(255,255,255,0.16); }

label { display: block; margin-top: 14px; color: #d6deec; font-weight: 800; }
input, button {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

button:disabled { opacity: 0.56; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<input type="text" placeholder="Email">
<input type="text" placeholder="Phone">
<input type="text" placeholder="Age">
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Use these rules before publishing real HTML.

Use labels

Placeholder text disappears while typing and is not a reliable label.

Use specific types

Email, tel, number, date and url give browsers more context.

Name submitted fields

Without name, a form control does not submit as expected.

Do not trust the browser alone

Server-side validation is still required.

Production thinking

Attributes are tiny pieces of HTML with real product impact.

Why does this matter?

Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.

Accessibility

Correct labels and input types help keyboard users, screen reader users and mobile users complete forms faster.

Production note

Input attributes can increase conversions because users make fewer mistakes and get better browser assistance.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change one tag, attribute or text value in the example.
  • Run the preview and describe exactly what changed.
  • Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

  1. Change one meaningful part of the HTML, not only the visible text.
  2. Run the preview and check whether the result still makes semantic sense.
  3. Explain why the element or attribute you changed belongs in this exact place.

Try it yourself

Input attributes for a signup form

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?