HTML
Element för ingångskontroll

Introduktion

Syntax

• <input type="" name="" value="">

parametrar

Anmärkningar

Kryssruta och radioknappar

Översikt

Kryssrutor och radioknappar skrivs med HTML-taggen <input> , och deras beteende definieras i HTML-specifikationen .

Den enklaste kryssruta eller radioknapp är en <input> element med en type attribut av checkbox eller radio , respektive:

<input type="checkbox">
<input type="radio">

Ett enda fristående kryssruteelement används för ett enda binärt alternativ, till exempel en ja eller ingen fråga. Kryssrutor är oberoende, vilket betyder att användaren kan välja så många val som de vill ha i en grupp kryssrutor. Med andra ord, kontrollera en kryssruta inte avmarkera övriga kryssrutor i kryssrutan grupp.

Radioknappar brukar komma i grupper (om det inte grupperas med annan alternativknappen, förmodligen tänkt dig att använda en kryssruta istället) identifieras genom att använda samma name attribut på alla knappar inom den gruppen. Valet av radioknappar är ömsesidigt exklusiva , vilket innebär att användaren bara kan välja ett val från en grupp radioknappar. När en radioknapp är markerad avmarkeras alla andra alternativknappar med samma name som tidigare kontrollerats.

Exempel:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

När de visas visas radioknappar som en cirkel (avmarkerad) eller en fylld cirkel (markerad). Kryssrutorna visas som en kvadrat (avmarkerad) eller en fylld kvadrat (markerad). Beroende på webbläsare och operativsystem har torget ibland rundade hörn.

attribut

kryssrutor och radioknappar har ett antal attribut för att kontrollera deras beteende:

value

Liksom alla andra inmatningselement anger value attribut det strängvärde som ska associeras med knappen i händelse av formulärsöverföring. Kryssrutor och radioknappar är emellertid speciella i det att när värdet utelämnas, är det standard on när det skickas, snarare än att skicka ett tomt värde. Det value attribut återspeglas inte i knappens utseende.

checked

Det checked attributet anger det ursprungliga tillståndet för en kryssruta eller alternativknapp. Detta är ett booleskt attribut och kan utelämnas.

Var och en av dessa är giltiga, likvärdiga sätt att definiera en kontrollerad alternativknapp:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

Frånvaron av det checked attributet är den enda giltiga syntaxen för en okontrollerad knapp:

<input type="radio">
<input type="checkbox">

När du återställer ett <form> , återgår kryssrutor och radioknappar till statusen för deras checked attribut.

Tillgänglighet

Etiketter

För att ge sammanhang till knapparna och visa användarna vad varje knapp är till för båda ska ha en etikett. Detta kan göras med hjälp av ett <label> -element för att linda in knappen. Detta gör också att etiketten kan klickas, så att du väljer motsvarande knapp.

Exempel:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

eller med ett <label> -element med ett for attribut inställt på id attributet på knappen:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

Knappgrupper

Eftersom varje radioknapp påverkar de andra i gruppen är det vanligt att tillhandahålla en etikett eller sammanhang för hela gruppen av radioknappar.

För att tillhandahålla en etikett för hela gruppen, bör <fieldset> inkluderas i ett <fieldset> -element med ett <legend> -element i det.

Exempel:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

Kryssrutor kan också grupperas på liknande sätt, med en fältgrupp och en legend som identifierar gruppen med relaterade kryssrutor. Men kom ihåg att kryssrutor inte skulle dela samma namn eftersom de inte är ömsesidigt uteslutande. Genom att göra detta kommer formuläret att skicka in flera värden för samma nyckel och inte alla språk på serversidan hanterar detta på samma sätt (odefinierat beteende). Varje kryssruta bör antingen ha ett unikt namn eller använda en uppsättning fyrkantiga parenteser ( [] ) för att indikera att formuläret ska skicka in en mängd värden för den tangenten. Vilken metod du väljer bör bero på hur du planerar att hantera formulärdatas klientsida eller serversida. Du bör också hålla förklaringen kort, eftersom vissa kombinationer av webbläsare och skärmläsare läser förklaringen före varje inmatningsfält i fältet.

Dold

<input type="hidden" name="inputName" value="inputValue">  

En dold ingång är inte synlig för användaren, men dess värde skickas till servern när formuläret ändå skickas.

Lösenord

<input type="password" name="password">

Inmatningselementet med ett typattribut vars värde är password skapar ett enfältigt textfält som liknar ingångstypen type=text , förutom att texten inte visas när användaren anger det.

<input type="password" name="password" placeholder="Password">

Platshållarens text visas i vanlig text och skrivs över automatiskt när en användare börjar skriva.

Obs: Vissa webbläsare och system ändrar standardbeteendet i lösenordsfältet för att också visa det senast skrivna tecknet för en kort varaktighet, så:

Skicka in

<input type="submit" value="Submit">

En skicka inmatning skapar en knapp som skickar in det formulär det är inuti när du klickar.

Du kan också använda elementet <button> om du behöver en skicka-knapp som lättare kan utformas eller innehålla andra element:

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

Fil

<input type="file" name="fileSubmission">

Filingångar tillåter användare att välja en fil från sitt lokala filsystem för användning med den aktuella sidan. Om de används tillsammans med ett form kan de användas för att låta användare ladda upp filer till en server (för mer information se Ladda upp filer ).

Följande exempel tillåter användare att använda file ingång för att välja en fil från deras filsystem och ladda upp filen till ett skript på servern som heter upload_file.php .

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

Flera filer

Genom att lägga till multiple attribut kan användaren välja mer än en fil:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Acceptera filer

Acceptera attribut anger vilka filtyper som användaren kan välja. Exempelvis .png , .gif , .jpeg .

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

Ingångsvalidering

HTML-inmatningsvalidering görs automatiskt av webbläsaren baserat på specialattribut på inmatningselementet. Det kan delvis eller helt ersätta validering av JavaScript-inmatning. Denna typ av validering kan kringgås av användaren via speciellt utformade HTTP-förfrågningar, så att den inte ersätter ingångsvalidering på serversidan. Valideringen sker endast när du försöker skicka in formuläret, så alla begränsade ingångar måste vara inuti ett formulär för att validering ska kunna ske (såvida du inte använder JavaScript). Tänk på att ingångar som är inaktiverade eller skrivskyddade inte kommer att utlösa validering.

Vissa nyare inmatningstyper (som email , url , tel , date och många fler) valideras automatiskt och kräver inga egna valideringsbegränsningar.

<input required>

Minsta / maximal längd

Använd minlength och maxlength att ange längdkrav. De flesta webbläsare kommer att förhindra att användaren skriver mer än max tecken i rutan och förhindrar dem från att göra sitt intresse ogiltigt även innan de försöker skicka in.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Ange ett intervall

Användning min och max attribut att begränsa sortimentet av nummer en användare kan mata in i en ingång av typen number eller range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

<input pattern="\d*" title="Numbers only, please.">

<input type="file" accept="image/*" title="Only images are allowed">

<input type="file" accept="image/*,.rar,application/zip">

Anmärkning: Lägga novalidate attribut till form elementet eller formnovalidate attribut till skicka-knappen, förhindrar validering på formelement. Till exempel:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

Formuläret har fält som krävs för att "publicera" utkastet men inte krävs för att "spara" utkastet.

Återställa

<input type="reset" value="Reset">

En ingång av reset av typ skapar en knapp som, när man klickar, återställer alla ingångar i den form den finns i till deras standardläge.

• Text i ett inmatningsfält återställs till tomt eller dess standardvärde (anges med value attribut).
• Alla alternativ i en valmeny kommer att avmarkeras om de inte har det selected attributet.
• Alla kryssrutor och radioboxar kommer att avmarkeras om de inte har det checked attributet.

Anmärkning: En återställningsknapp måste vara inuti eller fäst till (via form attribut) en <form> elementet för att ha någon effekt. Knappen återställer bara elementen i detta formulär.

siffra

<input type="number" value="0" name="quantity">

Tel

<input type="tel" value="+8400000000">

Inmatningselementet med ett typattribut vars värde är tel representerar en en-radig textredigeringskontroll för att ange ett telefonnummer.

E-post

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

Knapp

<input type="button" value="Button Text">

Knappar kan användas för att utlösa åtgärder som ska inträffa på sidan utan att skicka in formuläret. Du kan också använda elementet <button> om du behöver en knapp som lättare kan utformas eller innehålla andra element:

<button type="button">Button Text</button>

Knappar används vanligtvis med en "onclick" -händelse:

<input type="button" onclick="alert('hello world!')" value="Click Me">

eller

<button type="button" onclick="alert('hello world!')">Click Me</button>

attribut

[name]

name på knappen som skickas med formulärdata.

[type]

type av knapp.

Möjliga värden är:

submit : Knappen skickar formulärdata till servern. Detta är standard om attributet inte anges, eller om attributet dynamiskt ändras till ett tomt eller ogiltigt värde.

reset : Knappen återställer alla kontroller till deras initiala värden.

button : Knappen har inget standardbeteende. Det kan ha skript på klientsidan associerade med elementets händelser, som utlöses när händelserna inträffar.

menu : Knappen öppnar en popup-meny som definieras via det angivna elementet.

[value]

Det initiala värdet på knappen.

Färg

<input type="color" name="favcolor" value="#ff0000">

webbadress

<input type="url" name="Homepage">

Datum

<input type="date" />

Datetime-lokal

<input type="datetime-local" />

Bild

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

En bild. Du måste använda src-attributet för att definiera bildens källa och alt-attributet för att definiera alternativ text. Du kan använda höjd- och breddattributen för att definiera storleken på bilden i pixlar.

Räckvidd

<input type="range" min="" max="" step="" />

Månad

<input type="month" />

Tid

<input type="time" />

19:04:39
08:20:39.04

Vecka

<input type="week" />

Text

Den mest grundläggande ingångstypen och standardinmatningen om ingen type anges. Denna inmatningstyp definierar ett enfältigt textfält med radbrytningar som automatiskt tas bort från inmatningsvärdet. Alla andra tecken kan matas in i detta. <input> -element används i ett <form> -element för att deklarera ingångskontroller som tillåter användare att mata in data.

Syntax

<input type="text">

eller (utan att ange en type med standardattributet):

<input>

Standardbredden för en textfältinmatning är 20 tecken. Detta kan ändras genom att ange ett värde för size så här:

<input type="text" size="50">

size är tydligt annorlunda än att ställa in en bredd med CSS. Att använda en bredd definierar ett specifikt värde (i antal pixlar, procentandel av överordnade element, etc.) som ingången alltid måste vara bred. Att använda size beräknar mängden bredd som ska tilldelas baserat på det teckensnitt som används och hur bred tecknen normalt är.

Obs: Att använda size begränsar inte i sig antalet tecken som kan matas in i rutan, bara hur bred rutan visas. Information om begränsning av längden finns i Input Validation .

Ett inmatningsfält tillåter bara en textrad. Om du behöver textinmatning på flera linjer för en betydande mängd text, använd istället ett <textarea> -element .

Sök

<input type="search" name="googlesearch">

DateTime (Global)

Inmatningselementet med ett typattribut vars värde är " datetime " representerar en kontroll för att ställa in elementets värde till en sträng som representerar ett globalt datum och tid (med information om tidszon).

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

Tillåtna attribut:

• globala attribut
• namn
• Inaktiverad
• form
• typ
• autoslutförande
• autofokus
• lista
• min Max
• steg (flyta)
• readonly
• önskat värde