Summary  
This chapter explains how to apply HTML input attributes—such as placeholder, name, value, required, disabled, readonly, min, and max—to control field behavior and enforce validation rules on user inputs.

General domain of usage  
Web forms

Osaat jo käyttää syötekenttiä ja nimilappuja. Tarkastellaan nyt hyödyllisimpiä attribuutteja, jotka tekevät syötekentistä monipuolisempia ja käyttäjäystävällisempiä.

#### Paikkamerkki 
Näyttää vihjetekstin kentän sisällä.
```html
<input type="text" placeholder="Enter your email" />
```

#### Name
Tunnistaa kentän lomakkeen lähetyksen yhteydessä.
```html
<input type="text" name="username" />
```

#### Value
Asettaa kenttään oletusarvon.
```html
<input type="tel" value="+1 (484) 298-9732" />
```

#### Required
Estää lomakkeen lähetyksen, jos kenttä on tyhjä.
```hml
<input type="password" required />
```

#### Poistettu käytöstä
Tekee kentästä muokkaamattoman ja ei-interaktiivisen.
```html
<input type="text" value="New York" disabled />
```


#### Vain luku
Näyttää arvon, jonka käyttäjät voivat kopioida, mutta eivät muuttaa.
```html
<input type="text" value="USA" readonly />
```

#### Minimi ja maksimi
Asettaa rajoitukset numeerisille syötteille.
```html
<input type="number" min="21" max="99" />
```


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkF0dHJpYnV0ZXMgZm9yIElucHV0IEVsZW1lbnRzPC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogICAgICA8bGFiZWwgZm9yPSJtYWlsIj5FbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJtYWlsIiBuYW1lPSJtYWlsIiBwbGFjZWhvbGRlcj0iRW50ZXIgeW91ciBlbWFpbCIgcmVxdWlyZWQ+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0idXNlcm5hbWUiPlVzZXJuYW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0idXNlcm5hbWUiIG5hbWU9InVzZXJuYW1lIj48YnI+CiAgICAgIAogICAgICA8bGFiZWwgZm9yPSJwaG9uZS1udW1iZXIiPlBob25lIG51bWJlcjo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGVsIiBpZD0icGhvbmUtbnVtYmVyIiBuYW1lPSJwaG9uZS1udW1iZXIiIHZhbHVlPSIrMSAoNDg0KSAyOTgtOTczMiI+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0icGFzc3dvcmQiPlBhc3N3b3JkOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJwYXNzd29yZCIgaWQ9InBhc3N3b3JkIiBuYW1lPSJwYXNzd29yZCIgcmVxdWlyZWQ+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0iY2l0eSI+Q2l0eTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImNpdHkiIG5hbWU9ImNpdHkiIHZhbHVlPSJOZXcgWW9yayIgZGlzYWJsZWQ+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0iY291bnRyeSI+Q291bnRyeTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImNvdW50cnkiIG5hbWU9ImNvdW50cnkiIHZhbHVlPSJVU0EiIHJlYWRvbmx5Pjxicj4KICAgICAgCiAgICAgIDxsYWJlbCBmb3I9ImFnZSI+QWdlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIGlkPSJhZ2UiIG5hbWU9ImFnZSIgbWluPSIyMSIgbWF4PSI5OSI+PGJyPgogICAgICAKICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlNlbmQgRm9ybTwvYnV0dG9uPgogICAgPC9mb3JtPgogIDwvYm9keT4KPC9odG1sPg==

Mikä attribuutti tarjoaa vihjeen tai esimerkkitekstin syöttökenttään, ohjaten käyttäjiä siitä, millaista syötettä odotetaan?

Mikä attribuutti määrittää syöttökentän nimen, jota käytetään tunnistamaan syötetyt tiedot lomakkeen lähetyksen yhteydessä?

Mikä attribuutti estää lomakkeen lähettämisen, jos pakollinen kenttä jätetään tyhjäksi?

Rakenna jäsenneltyjä verkkosivuja HTML:n avulla. Luo tekstisisältöä, linkkejä, luetteloita, kuvia, taulukoita ja lomakkeita sekä järjestä kaikki semanttisilla elementeillä kokonaiseksi sivuksi.

HTML-Syötekenttien Attribuutit Parannetun Toiminnallisuuden Saavuttamiseksi

Yleiset syötekentän attribuutit

Paikkamerkki

Name

Value

Required

Poistettu käytöstä

Vain luku

Minimi ja maksimi

1. Mikä attribuutti tarjoaa vihjeen tai esimerkkitekstin syöttökenttään, ohjaten käyttäjiä siitä, millaista syötettä odotetaan?

2. Mikä attribuutti määrittää syöttökentän nimen, jota käytetään tunnistamaan syötetyt tiedot lomakkeen lähetyksen yhteydessä?

3. Mikä attribuutti estää lomakkeen lähettämisen, jos pakollinen kenttä jätetään tyhjäksi?