Input text
Hvordan anvendes et input i text-felt
Hvis man i et program skal have tal eller tekst ind i programmet så er input i et text-felt en lidt besværlig måde at gøre det på, men til gengæld giver den brugeren nogle fordele der kan være at foretrække.
For at lave inputtet skal man have et HTML-input tag der kan se ud som følger:
<input type="text" id="talInd">
id="talInd" er det navn vi giver input-feltet. Det skal være unikt i koden, så javascript-fortolkeren ikke kan være i tvivl om at det er lige netop dette felt vi vil hente fra
Resten af HTML-tagget skal se ud som vist, så det giver et Input Text felt som vist her.
Programlinien for at hente det indtastede i javascript er:
minVar = document.getElementById("talInd").value;
minVar er den variabel det indtastede ender i når programlinien udføres.
document.getElementById() er den metode der kan finde input text-feltet ved hjælp af det ID (navnet), og "talInd" er det ID der skal søges efter i HTML-koden.
.value angiver at når input text-feltet er fundet i koden, så er det værdien i feltet der skal hentes.
Det der giver en del ekstra kode til denne metode er at man skal have angivet at nu er tallet indtastet, og der skal gøres noget ved det.
Metoden er illustreret i eksemplet herunder, og går ud på at man skal klikke på en knap, for at angive at tallet er indtastet, og når man klikker på knappen, så kaldes en funktion der henter tallet i det ene input text-felt, laver en beregning og lægger det over i et andet input text-felt.
input i text-felt med forslag til værdi
Man kan sætte en standardværdi i et input text-felt, der bliver resultatet, hvis brugeren ikke indtaster noget. Det gøres ved at skrive det ind i HTML-tagget:
<input type="text" id="talInd" value="67">
I programmeringssprog kaldes værdien for en default værdi.
Eksempel på anvendelse af input i text-felt
Koden viser først lidt forklaring, og har et input text-felt op, hvor man kan indtaste et tal.
Når tallet er indtastet og man har klikket på knappen, så kommer tallet gange 2 ovre i et andet input text-felt.
<html>
<head>
<title>input</title>
<script type="text/javascript" language="JavaScript"> // Funktion der fanger en indtastning
function fordoble () {
tal = document.getElementById("talInd").value;
tal = tal * 2;
// Placerer beskeden nede i formularen
document.getElementById("tekstUd").value = tal;
} </script>
</head>
<body>
<h1>input-bokse</h1>
<p>input har mange funktioner - her som tekstfelt og knap.<br />Tekstfeltet har flere funktioner, både til input og output.</p>
Indtast et tal : <input type="text" id="talInd"><br />
Tryk på knappen <input type="button" value="Knappen" onClick="fordoble();"><br />
Her er resultatet af beregningen : <input type="text" id="tekstUd" size="30" readonly="yes"><br />
</body>
</html>Filen med koden kan hentes i en zip-fil
Fordele ved input i text-felt
Fordelen ved den metode er at det indtastede bliver stående i feltet, så længe siden ikke opdateres.
Ulemper ved input i text-felt
Ulempen er at brugeren er nødt til at angive at indtastningen er færdig på en eller anden måde - det kan være ved at trykke på en input_button der sender et signal til programmet at der skal ske noget, eller man kan lave mere avancerede teknikker, hvor man sætter et input_filter på så når brugeren f.x. trykker retur, så bliver tallet accepteret.
| Webcode | |
|---|---|
| JavaScript | for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer |
| js Input | Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event |
| js Output | Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas |
| js Syntaks | Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens |
| js Objekt | Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model |
| Tid i JavaScript | Date objektet - setTimeout - setInterval |
| PHP | Header - Include |
| Webdesign | |
|---|---|
| CSS | Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
| HTML | <b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |