Formularer

Indlæs andet indhold på denne side:

Brugerfelter

Emnet bruger-input er så omfattende, at jeg har valgt at dele det op i mindre bidder:

Indlæs andet indhold på denne side:

select

Siden er opdateret 28.7.2008

 Alder

<select name="alder" size="1">
  <option>Vælg</option>
  <option value="teen">10-20</option>
  <option value="twenty">21-30</option>
  <option value="therty">31-40</option>
  <option value="fourty">41-50</option>
  <option value="fifty"> 50+</option>
</select>

Input-typen select laver en liste over valgmuligheder i en "drop-down"menu. Klik på ned-pilen i højre side af boksen og se valgmulighederne. Den valgmulighed, man klikker på i menuen, bliver returneret som svar.

Når man har foretaget et valt og formularen sendes, er det indholdet i value, der sendes med formularen.

Man kan eventuelt lade første option-element være tomt, så der ikke returneres noget, hvis der ikke er sket et valg.


 Alder

<select name="alder" size="1">
  <option value="teen">10-20</option>
  <option value="twenty">21-30</option>
  <option value="therty" selected="selected">31-40</option>
  <option value="fourty">41-50</option>
  <option value="fifty"> 50+</option>
</select>

Med parameteren selected og den tilhørende værdi selected kan man foruddefinere en værdi, der vælges automatisk, hvis brugeren ikke foretager et valg.


 Alder

<select name="alder" size="1">
  <option>Vælg</option>
  <option value="pre" disabled="disable">00-17</option>
  <option value="teen">18-20</option>
  <option value="twenty">21-30</option>
  <option value="therty">31-40</option>
  <option value="fourty">41-50</option>
  <option value="fifty"> 50+</option>
</select>

Med parameteren disabled og den tilhørende værdi disabled kan man foruddefinere en værdi, der ikke kan vælges - dvs. IE ignorerer denne spærring.


 Ønskejob for små drenge ?

<select name="alder" size="3" multiple="multiple">
  <option>Brandmand</option>
  <option>Politibetjent</option>
  <option>Jagerpilot</option>
  <option>Galopjockey</option>
  <option>Hjernekirrurg</option>
  <option>Mesterbokser</option>
  <option>Fodboldstjerne</option>
</select>

Input-typen select kan også defineres til at være åbnet med mere end en linje synlig. Du får så en scrollbar, så du kan 'køre' op og ned gennem listen. Du bestemmer antallet af synlige linjer i attributten size.

Du kan også lave det sådan, at der kan vælges mere end et punkt i listen - det gøres ved at tilføje attributten multiple="multiple". Du vælger ved at markere første ønskede punkt, holde [shift] nede og markere sidste i en ubrudt rækkefølge eller holde [Ctrl] nede og plukke fra listen efter behag.


 Rejsemål

<select name="rejser" size="1">
<optgroup label="Norden">
  <option>Norge</option>
  <option>Sverige</option>
  <option>Finland</option>
  <option>Island</option>
</optgroup>
<optgroup label="Sydeuropa">
  <option>Spanien</option>
  <option>Portugal</option>
  <option>Italien</option>
  <option>Grækenland</option>
</optgroup>
</select>

En anden mulighed er at inddele valgmulighederne i grupper. Det sker ved at indsætte koden <optgroup></optgroup> om hver ønsket gruppe, samt at indsætte attributten label med en passende parameter i optiongruppens starttag.


De næste 4 funktioner med select-bokse stammer oprindeligt fra Chr. Hansen

Tilføj og fjern options fra en selectboks:

Husk både tekst og værdi ved tilføjelse



  

Funktionen er så omfattende, at jeg har valgt at beskrive den på en selvstændig side


Tilvælg eller fravælg options vist i højre selectboks.

Marker en option og vælg retning


Funktionen er så omfattende, at jeg har valgt at beskrive den på en selvstændig side


Lav om på prioriteringsrækkefølgen

Vælg en option og flyt


Funktionen er så omfattende, at jeg har valgt at beskrive den på en selvstændig side


Indhold i højre select-boks afhænger af valget i venstre boks

Vælg kategori i primær indeks først

Primære indeks:

Sekundære indeks:

Funktionen er så omfattende, at jeg har valgt at beskrive den på en selvstændig side.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2000
Hjemmesideskolen
Du er her: Forsiden - html - Formularer
Brugere lige nu: 1
Home Mail