Summary  
This chapter covers creating and structuring HTML form elements, including labels and various input controls (text, tel, email) along with a submit button.

General domain of usage  
Front-end web development

Lomakkeet ovat käyttäjävuorovaikutuksen selkäranka verkkosivuilla. Niiden avulla käyttäjät voivat jakaa tietoa, olla vuorovaikutuksessa sisällön kanssa ja suorittaa olennaisia toimintoja, kuten ostoksia tai hakuja, mikä muuttaa staattiset verkkosivut dynaamisiksi kokemuksiksi.

Tällä kurssilla keskitytään lomakkeiden merkkauskieleen. Kurssin lopussa osaat luoda toimivia lomakkeita, jotka parantavat käyttäjäkokemusta.

Tässä on nopea esimerkki yksinkertaisesta lomakkeesta käytännössä:

<html lang="en">
  <head>
    <style>
      .border-container {
        border-radius: 10px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }

      .form1 {
        width: 400px;
        background-color: #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px solid #ff8a00;
        padding-bottom: 5px;
      }

      .label1 {
        font-size: 16px;
        color: #666;
        display: block;
        margin-top: 20px;
      }

      .input1 {
        width: 340px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .input1:focus,
      .input1:hover {
        outline: none;
        border-color: #ff8a00;
        box-shadow: 0 0 5px rgba(255, 138, 0, 0.5);
      }

      .input1[type="submit"] {
        background-color: #ff8a00;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        width: 100px;
        display: block;
        margin: 30px auto 0 auto;
      }

      .input1[type="submit"]:hover {
        background-color: #d27204;
      }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Play:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu+Mono&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 18px;
        font-weight: 400;
        box-sizing: border-box;
        vertical-align: baseline;
      }
      body {
        font-family: "Hind Siliguri", sans-serif;
        line-height: 1;
        height: 100%;
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 0 auto;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body class="body1" style="padding: 1.5px 0">
    <div class="border-container">
      <form class="form1" onsubmit="return false">
        <h3 class="title1">Yhteyshenkilö</h3>
        <label class="label1" for="name">Etunimi</label>
        <input class="input1" type="text">
        <label class="label1" for="sirname">Sukunimi</label>
        <input class="input1" type="text" id="sirname">
        <label class="label1" for="phone">Puhelinnumero</label>
        <input class="input1" type="tel" id="phone">
        <label class="label1" for="mail">Sähköposti</label>
        <input class="input1" type="email" id="mail">
        <input class="input1" type="submit" value="Submit">
      </form>
    </div>
  </body>
</html>


Tällaiset lomakkeet mahdollistavat käyttäjien yhteydenoton ja vuorovaikutuksen verkkosivustosi kanssa. Tutustutaan toiminnallisiin lomakkeisiin!

Tämä kurssi keskittyy lomakkeiden merkkauskielen luomiseen ja lomake-elementtien muotoiluun. Kurssin lopussa osaat mahdollistaa käyttäjävuorovaikutuksen ja osallistumisen.

Lomakkeiden kautta lähetetyn datan käsittely – kuten tietojen tallentaminen tietokantaan tai palvelinpuolen kielten, kuten JavaScript (Node.js), Python, PHP tai Go, käyttäminen – ei kuitenkaan kuulu tämän kurssin sisältöön.

Huomio

Mikä on lomakkeiden päätarkoitus verkkosivuilla?

Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.

Tutki verkon sisäistä toimintaa. Opi, miten data kulkee verkkojen läpi, tutustu protokollien rooliin ja selvitä IP-osoitteiden ja verkkotunnusten mysteerit. Saa korkeatasoinen ymmärrys siitä, miten verkkoselaimet ja palvelimet kommunikoivat toimittaakseen verkkosisältöä.

Tutustu tunnisteiden voimaan sisällön jäsentämisessä, otsikoista ja kappaleista listoihin ja taulukoihin. Opi, kuinka voit parantaa elementtejä attribuuteilla.

HTML-dokumentin rakenteen ydin. Opi HTML-dokumentin osat, mukaan lukien doctype-ilmoitus, head ja body. Ymmärrä kunkin elementin tarkoitus ja miten ne vaikuttavat verkkosivun kokonaisrakenteeseen.

Tee verkkosivusta houkuttelevampi median, kuten kuvien, äänen ja videon avulla. Työskentele jäsennellyn taulukkomuotoisen datan kanssa taulukoiden muodossa.

Tutustu HTML-lomakkeiden monipuolisuuteen. Opi suunnittelemaan intuitiivisia ja käyttäjäystävällisiä lomakkeita hyödyntämällä keskeisiä käsitteitä ja tekniikoita. Selvitä, kuinka lomakkeet mahdollistavat käyttäjän vuorovaikutuksen ja tietojen lähettämisen verkkosivustoilla.

HTML-Lomakkeiden Esittely

HTML-Lomakkeiden Esittely