Skapa och arbeta med formulär i html. Skapa ett formulär i HTML Select, Option, Textarea, Label, Fieldset, Legend - rullgardinslistor, textområden och andra webbformulärelement

Tecken på graviditet efter embryoimplantation

HTML-alternativtaggen används för att skapa en rullgardinslista som låter användaren välja ett alternativ från en fördefinierad uppsättning värden.

Texten som är synlig för användaren kan skilja sig från den text som anges i värdeattributet. Så här skapar du en rullgardinslista:

  • Rullgardinslistan skapas med taggen alternativ för val definieras med en tagg
  • I taggen

Det är också möjligt att ange en CSS-klass istället för att använda ett ID för att utforma rullgardinsmenyn.

I nästa avsnitt kommer jag att visa exempel på att använda HTML-rullgardinslistan i JavaScript/JQuery. Exemplen visar också hur man ställer in stilar

Använder attributet value

Som nämnts tidigare kan värdet på värdeattributet skilja sig från texten som visas på sidan. Du kan till exempel visa namn på länder eller färger för användare och använda kortkoder i värdeattributet.

I följande exempel kommer vi att skapa en rullgardinslista med ett värdeattribut:

Se onlinedemo och kod

För tagg

Exempel på åtkomst till det valda alternativet i JavaScript

Låt oss nu skapa ett exempel på att komma åt värdet för ett valt alternativ och utföra några åtgärder. Vi skapar samma lista som i exemplet ovan med färgalternativ. När du har valt den klickar du på knappen för att tillämpa den färgen på dokumentet:

Se onlinedemo och kod

För alternativvärdet HTML används följande kod:

Följande kodrad används i JavaScript för att komma åt värdet av ett alternativs värdeattribut innebörden skiljer sig från texten. När du väl har valt en färg visar jQuery den synliga texten i varningen. Taggkod

Så här får du tillgång till detta värde i HTML välj alternativ valt JavaScript:

var selectcolor = $("#jqueryselect option:selected").text();

Du kan också komma åt värdet med JQuery $.val()-metoden:

var selectcolor = $("#jqueryselect").val();

Byt ut den här raden i exemplet ovan så kommer koden att visa kortkoden/färgvärdet i värdeattributet snarare än den synliga texten.

Ett exempel på att få ett värde i ett PHP-skript

I det här exemplet på att få värdet på alternativet valt från en rullgardinslista skapas formuläret med taggen

Och här är hur PHP-skriptet används för att få HTML-valvärdet:

". $_POST["selfphp"].""; } ?>

Om formuläret anger GET-metoden använd PHP-array $_GET[“”].

Styla en rullgardinslista med CSS

Låt oss nu titta på hur man definierar liststilar - definiera sådana formulärelement som knappar, omkopplare, textfält för datainmatning.

  • type="text" - definierar ett textfält för datainmatning.
  • type="lösenord" - definierar ett fält för att ange ett lösenord, med texten som visas i form av asterisker eller cirklar.
  • type="checkbox" - definierar en alternativknapp.
  • type="hidden" - definierar ett dolt formulärelement - används för att överföra ytterligare information till servern.
  • size="25" - textfältets längd i tecken.
  • maxlength="30" - det högsta tillåtna antalet angivna tecken.
  • value="" - definierar värdet som kommer att skickas för bearbetning om det är relaterat till radioknappar eller omkopplare. Värdet på detta attribut som en del av ett textfält eller en knapp kommer att visas som till exempel Vasya eller Logga in i exemplet ovan.

    • Exempel HTML-formulär | Kommentarer på sajten

    Exempel HTML-formulär




    namn



    Post

    Taggar, attribut och värden

    • action="http://site/comments.php" - definierar webbadressen till vilken data från formuläret ska skickas.
    • id="" - definierar namnet och identifieraren för formulärelementet.
    • name="" - definierar namnet på formelementet.
    • - definiera ett textfält som en del av formuläret.
    • cols="" - bestämmer antalet kolumner i formulärtextfältet.
    • rows="" - definierar antalet rader i formulärtextfältet.

    Om mellan placera text, kommer den att visas i fältet som ett exempel som enkelt kan tas bort.

    Exempel HTML-formulär | Rullgardinslista

    HTML-formulär

    Taggar, attribut och värden

    • - definiera en lista med positioner att välja.
    • size="" - bestämmer antalet synliga listpositioner. Om värdet är 1 har vi att göra med en rullgardinslista.
    • - bestämma positionerna (posterna) i listan.
    • value="" - innehåller värdet som kommer att skickas av formuläret till den angivna webbadressen för bearbetning.
    • selected="selected" - markerar ett listobjekt som ett exempel.

    Exempel HTML-formulär | Lista med rullningslist

    Genom att öka värdet på attributet size="" får vi en lista med en rullningslist:

    Första position Andra position Tredje position Fjärde position

    HTML-formulär

    För det här alternativet använder du flaggan multiple="multiple", vilket gör det möjligt att välja flera positioner. Dess frånvaro gör att du bara kan välja ett objekt.

  • type="submit" - definierar en knapp.
  • type="reset" - definierar en återställningsknapp.
  • value="" - definierar etiketten på knappen.

    • Se dessutom:

    Tack vare taggen måste placeras i formuläret (tag

    ). Nedan är ett exempel:




    Vilka är attributen för select-taggen?

    Märka







    Det andra attributet krävs , med dess hjälp kan du "berätta" för webbläsaren att listan måste väljas innan du skickar in formuläret, annars kommer webbläsaren att förbjuda att skicka in formuläret och kommer att visa ett motsvarande meddelande till dig. Utseendet på detta meddelande är helt webbläsarberoende och kan inte ändras av användaren. Nedan är ett exempel på hur du använder det obligatoriska attributet:




    Det tredje attributet är storlek , som kan användas för att ange antalet listobjekt som ska visas. Size-attributet kan bara innehålla ett heltal. Size-attributet omvandlar listan, till exempel om den är lika med 1, då taggen








    Hälsningar till alla läsare av min blogg. Idag ska jag berätta hur du gör en rullgardinslista i HTML, vilka taggar och attribut du behöver använda, och även för vilka ändamål du kan behöva den.

    Välj taggen och skapa en rullgardinslista

    Så en rullgardinslista i html skapas med hjälp av en parad select-tagg, i vilken parade alternativtaggar placeras. Det är i dem som alla alternativ som kommer att erbjudas när du klickar på listan registreras. Exempel:

    Välj ett djur

    I det här fallet kommer du att se vad som visas mellan öppnings- och stängningsdelarna av alternativet på skärmen, och värdet i värdeattributet kommer att skickas till servern eller bearbetas med ett skript.

    Listan i html kan vara vanlig eller med flervalsalternativ. För att göra det möjligt att välja flera objekt måste du lägga till ett tomt multipelattribut för att välja. Håll ned för att välja flera värden ctrl och tryck på vänster musknapp.

    Ett annat användbart attribut är storlek. Det låter dig välja hur många rader som ska visas i rullgardinsmenyn.

    Ett annat attribut är inaktiverat. Det gör listan oklickbar och oklickbar, men fortfarande synlig på sidan.

    Obligatoriskt – html5-attribut. Om det är inställt kommer formuläret inte att skickas utan att välja ett värde från rullgardinsmenyn. I allmänhet blir det ett måste-ha val. Medan attributet inte fungerar i alla webbläsare.

    Alternativ Tag Attribut

    Egentligen fungerar select bara som en behållare för listobjekt, de specificeras själva med option-taggen. Den har en värdeparameter, som vi redan har upptäckt, men förutom detta finns det andra. Till exempel:
    Inaktiverad – gör listobjektet otillgängligt för val. Den kommer att visas, men du kan inte klicka på den.

    Valt – elementet kommer att väljas som standard. I en vanlig lista kan detta attribut utan värde tilldelas endast ett objekt, i en multipellista kan det tilldelas flera.

    Viktigt förtydligande för korrekt drift

    Om urvalsresultatet behöver skickas till servern eller bearbetas genom skript, placera sedan urvalet i formuläret så att inga fel uppstår. Faktum är att rullgardinsmenyn ursprungligen skapades som ett av formulärelementen.

    Vad används select till?

    Vanligtvis kan det vara användbart för dig om du registrerar dig på din webbplats eller vill göra en undersökning. Elementet har en nackdel - det förändrar inte utseendet särskilt bra via css.

    Som standard, när du klickar på en lista, visas en blå ram, de listobjekt som markören hålls över är markerade i samma färg. För att förhindra att ramen visas när du klickar på den, eller att den markeras i en annan färg, kan du skriva följande väljare:

    Välj:fokus(
    kontur: 1px fast orange;
    }

    Ramen blir nu orange.

    Alternativet kan också utformas, men när du håller muspekaren över ett objekt blir dess bakgrund blå och av någon anledning ändras inte detta genom stilar.

    Alternativ(
    Färg brun;
    bakgrund: aqua;
    }

    Förresten, kanske några av er vet hur man ändrar bakgrundsfärgen när man håller muspekaren över ett objekt via css?

    Det är allt för tillfället på select-taggen och dess användning. Det finns inga ytterligare funktioner för det i html. Alla andra operationer med den kan utföras med javascript och php. Om du till exempel behöver skapa en lista för att välja födelseår och det kan finnas 80-100 olika alternativ, skulle du inte skriva dem manuellt?

    Det är just därför du behöver använda programmering, nämligen en loop. Tja, okej, det här är ett ämne för en annan konversation, men för idag är det här all information jag ville berätta för dig. Du kan bekanta dig med andra huvudtaggar i html.

    Beskrivning

    HTML-tagg kan innehålla två eller flera taggar

    Bredden på rullgardinsmenyn bestäms av den längsta texten som anges i taggen

    Attribut

    autofokus: Anger att elementet automatiskt ska få fokus när webbsidan laddas. Möjliga värden för det booleska autofokusattributet: Exempel » form: Definierar formen som elementet är associerat med. Attributvärdet är elementidentifieraren
    . Detta attribut låter dig placera ett element Exempel »

    Obs: På grund av de olika sätten på vilka flera objekt kan väljas och det ytterligare meddelandet till användarna om att flera alternativ är tillgängliga, rekommenderas att du använder kryssrutor istället för en rullgardinslista.

    Namn: Definierar namnet för rullgardinsmenyn. Den kan användas för att komma åt formulärdata efter att den har skickats, eller för att referera till ett element i JavaScript. storlek: Anger antalet synliga alternativ i rullgardinsmenyn. Om värdet på storleksattributet är större än 1 men mindre än det totala antalet alternativ i listan, kommer webbläsaren automatiskt att lägga till en rullningslist för att indikera att det finns fler alternativ att visa.

    Publikationer om ämnet