Artikel: Formulär element och JavaScript

Vi behöver inte skicka ett formulär för att använda oss utav de element som formuläret består av. Flera delar av dessa elementen gäller bara om man skickar iväg, submittar, ett formulär. Vi ska inte använda elementen <form> men kan med fördel använda elementen och dess attribut för att strukturera inmatningen. Vi tar en närmare titt på ett par “input element” som kan vara bra att känna till.

input type=“text”

Ett av de vanligaste elementen är ett textinmatningsfält.

<div id="content" class="content">
  <h1>Input element</h1>
  <label for="mytext">Skriv något: </label>
  <input id="mytext" type="text" value="default text">
</div>

Utan css ser det inte så roligt ut. Jag lägger följande i stylen:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
  margin-bottom: 1em;
}

.content {
  width: 50%;
  padding: 3em;
  margin: 0 auto;
}

label {display: block;}

input[type=text] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

Om vi nu laddar om sidan ser det lite trevligare ut:

Hämta elementet med JavaScript

Vi ska såklart även kunna hämta det värde som användaren skriver in. Det hittar vi i element.value:

const element = document.getElementById("mytext")
const value = element.value

// value innehåller det som skrivits i fältet
console.log(value)

Värt att notera är att all data vi hämtar från formulärelement kommer som strängar.

Om vi nu skriver något så kommer det inte synas eller hämtas något. Vi laddar in JavaScripten när textfältet är tomt och vi har ingen eventlyssnare eller knapp som uppdaterar värdet än. Sålänge kan vi sätta ett defaultvärde för inputfältet med attributet value:

...
<input id="mytext" type="text" value="default text">
...

Nu kommer elementet ha ett värde redan när sidan laddas och det hämtas med JavaScript och skrivs ut.

Det finns en del generella attribut vi kan använda som bestämmer hur elementet ska bete sig och vad en användare ska kunna mata in. De flesta är ganska själförklarande:

disabled
size="<number>" (sätter storleken i antal tecken)
maxlength="<number>" (max antal tecken)
placeholder="<string>"

input type=“number”

En annan typ som kan vara bra att känna till är number. Här förvänta användaren mata in en siffra. Vi lägger till det i css:en och htmlkoden:

...
input[type=text], input[type=number] {
 /* Restan av reglerna */

Och i htmlkoden:

...
<label for="mynumber">Ange en siffra: </label>
<input id="mynumber" type="number">

Inmatningsfältet ser lite annorlunda ut. Håller man muspekaren över fältet ser man små pilar:

Här finns det fler attribut vi kan sätta som styr upp användaren lite:

min="<number>" (Ett lägsta möjliga värde)
max="<number>" (Ett högsta möjliga värde)
step="<number>" (Hur många steg ska man ta per klick)

En knapp

Vi behöver ju kunna hämta de värden användaren skriver in när vi vill, inte bara när de är tomma och sidan laddas. Vi lägger till en knapp som triggar flödet:

...
<input type="button" id="start" value="Starta">
...

Och lite css:

input[type=button] {
  width: 100%;
  background-color: #484a48;
  color: white;
  padding: 14px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Nu börjar det likna något. Jag tar bort default texten från textinmatningen och laddar om sidan:

Hämta värdena dynamiskt

Nu är det dags att sparka igång flödet och hämta värdena när man trycker på knappen. Mot JavaScripten!

const button = document.getElementById("start")

function getInputData(event) {
  // Hämta värdena varje gång man trycker på knappen
  const textInput = document.getElementById("mytext").value
  const numberInput = document.getElementById("mynumber").value


  console.log(`Textfield: ${textInput}`)
  console.log(`Numberfield: ${numberInput}`)
  console.log(`Number data type: ${typeof numberInput}`) // Även input number kommer som en sträng
}

button.addEventListener("click", getInputData)

form elementet

En del funktionalitet behöver som sagt finnas i ett formularelement och knappen behöver då vara av typen submit. Då får man till exempel en notis om man väljer en siffra som är större än det valda max=<number> och så vidare. Vill man använda ett formulärelement och submit-knapp behöver man stoppa formulärets “defaultbeteende” vilket är att skickas någonstans:

<form>
  <h1>Input element</h1>
  <label for="mytext">Skriv något: </label>
  <input id="mytext" type="text">

  <label for="mynumber">Ange en siffra: </label>
  <input id="mynumber" type="number" max="3"> <!-- Stoppas att skickas om värdet överstiger 3 -->

  <input type="submit" id="start" value="Starta">
</form>

I JavaScripten:

button.addEventListener("click", function(event) {
  event.preventDefault() // Förhindra "defaultbeteende"
  getInputData()
})

Avslutningsvis

Det finns en hel del input element med olika betydelse och funktionalitet. Ge dig gärna ut och testa lite olika och kika på vilka attribut de tillhandahåller.