Geavanceerde vorm

verbeteren van het uiterlijk en het comfort

De standaard HTML 4.0 vormt gebracht aan het gebied een paar nieuwe ideeën die al zijn geïmplementeerd in nieuwe browsers. (Ik bedoel nu de meest gebruikte browser, Mozilla en Internet Explorer versies 5 en 6, die bovendien kan de formulieren met behulp van CSS.)

Fieldset - Label - optgroup - Accesskey - tabIndex - readonly > -Uiterlijk CSS

Fieldset

Fieldset is een groep van dozen verpakt in een zwakke frame. Voorbeeld:

<fieldset>
<legend> Titel Group </ legend>
Naam <input size=10>
Achternaam <input size=10> <br>
E-mail <input size=10>
</ Fieldset>

Zo blijkt:

Headline Group Naam Achternaam
E-mail

<legend> Tag moet onmiddellijk volgen fieldset, maar de inhoud ervan is de titel van het frame. Deze locatie werkt onopvallend in oudere browsers die labels <fieldset> <legend> en misschien niet te ondersteunen. Breedte van de doos is normaal gesproken 100%, dus het is goed om <fieldset> stijl aan te passen of het aan de tafel. IE maakt flauw grijs frame, dik frame maakt Mozilla. Het kan worden ingesteld stijl grens .

Label

Label veld. Voorbeeld:

Alleen schrijven een meer complexe variatie

Naam: <input size=10 name="jmeno">

Het enige verschil is dat bij het klikken op het label in de tag is doos> formulier geactiveerd (springt focus op het). Het etiket van de doos met koppelingen voor het gebruik van attributen en id. Een ander voordeel van deze notatie, misschien we zullen zien in toekomstige browsers. Klik op "Klik hier" Je kunt het proberen als uw browser ondersteunt:

Klik hier:

Groep opties optgroup

< select name="stat" size="1"> <optgroup label="Evropa"> <option value="GB">Velká Británie</option> <option value="DE">Německo</option> <option value="FR">Francie</option> <option value="CZ">Česko</option> <option value="SK">Slovensko</option> </optgroup> <optgroup label="Amerika"> <option value="USA">USA</option> <option value="CD">Kanada</option> <option value="MX">Mexiko</option> </optgroup> <optgroup label="Asie"> <option value="RU">Rusko</option> </optgroup> </select>

Tag <optgroup> <select> menu kunt u associëren elke groep de keuze. Ze ondersteunen het šestkové browser versies. Andere versies <optgroup> negeren de tag-en weergave-opties <optie> normaal gesproken onder hem. Bekijk een voorbeeld .

De optgroup tag kan worden gewijzigd met behulp van CSS en kleur van het lettertype en achtergrondkleur, maar niets meer (zoals in optie).

Als u een PHP boek van Jiri Koska hebben, dus er is op pagina 121 Figuur multilevel verkiezingen gemaakt met behulp van optgroup. Ik weet niet waar hij trouwde, zoals multi-level het niet overal te kunnen werken.

Accesskey

Een andere manier om de formuliervelden te activeren, zonder erin te klikken, is de sneltoets Alt + letter te gebruiken. De brief is ingevoerd als de accesskey attribuut waarde, bijvoorbeeld de doos:

<u> J </u> méno: <input type=text accesskey="j" >

lijken volkomen normaal, maar wanneer u op Alt + j (op het Tsjechische toetsenbord alt links) activeert het vak voor de registratie:

J Naam:

Accesskey kan ook zo gebruik maken van de links (<a> tag), na het indrukken van Alt + belangrijke schakel direct volgt. Het is een goede gewoonte actief brief te onderstrepen of op andere wijze aandacht van de gebruiker om te begrijpen dat het ventiel kraan.

Accesskey is ontworpen om de toegankelijkheid van websites te verbeteren, maar vermindert de bruikbaarheid .

TabIndex

Ervaren Web-gebruikers bij het invullen van formulieren die wij gebruiken de tab-toets (TAB) voor hoppen tussen de formuliervelden. Maar als iemand een gecompliceerd te gruwelijk vorm (meestal door middel van geneste tabellen) bouwt en vervolgens het tabblad van de gebruiker perspectief, gedraagt zich grillig (omdat het een opeenvolging van HTML-code, geen visuele volgorde). In dergelijke gevallen, om geschikte te gebruiken als een tabindex attribuut van formuliervelden.

Dit voorbeeld is ook handig in een ander geval, namelijk wanneer de pagina is een zeer belangrijke vorm velden, maar dat het volgen van een groot aantal links. Een typisch voorbeeld is het zoekvak in de catalogi van het type List. Als de gebruiker wilde box proťukat tabblad zoeken, dus het zal een lange tijd duren. Indien echter, zal worden vastgesteld tabIndex = "1", de box wordt geactiveerd door het indrukken van de tab eerste.

Poging tot voorbeeld:

Wanneer u op TAB drukt om te gaan door alle dozen die tabIndex te stellen en dan pas geactiveerd zonder de tabIndex hebben. Als een TabIndex waarde wordt gegeven een natuurlijk getal, waarvan set is het gebruikelijk om de hele pagina.

Als er iets sets de tabIndex van nul, kan het niet activeren van een tab (meestal onbelangrijk kant box).

Voeg een attribuut met een handicap (geen waarde) om formuliervelden ontoegankelijk zijn, dus kan niet worden geactiveerd. Voor sommige types van velden, het verbod tot uitdrukking visueel zešedivěním (bijv. checkbox), anderen alleen omdat je niet kunt klikken in hen (type = tekst in Explorer).
<input type=text size=10 disabled>
<input type=checkbox disabled>

Een ander type van het verbod is alleen-lezen attribuut (alleen lezen) dat de activatie mogelijk maakt, maar staat niet toe dat een verandering:
<input type=text size=10 value="pokus" readonly>

Deze velden worden ofwel gebruikt worden als een variant van de verborgen velden (echter onzeker, want ze negeren het verbod op oudere browser) of aan de cliënt script (Javascript meestal) te diversifiëren. Veldwaarden en stel het verbod is omdat JavaScript kan worden gewijzigd.
Als het vak is ingesteld op uitgeschakeld, wordt het formulier niet verzenden. Velden alleen-lezen transmissie. Als u moet ontoegankelijk zijn voor de box die stuurt, maar het zal grijs, stijl toe te voegen aan background-color .

Verschijning met CSS

Cascading Style Sheets (CSS) om de formuliervelden formaat worden zelden gebruikt. Dit is verrassend, want het biedt veel interessante visuele effecten. Update 2004: Aan de andere kant, nu veel beter styling vormen wordt niet aanbevolen.

Voorbeeld van een eenvoudige ingang doos kleur:

Nice, toch? En dat is niet alles. Ze zijn ook voor lettertype-eigenschappen binnen het veld (kleur, lettertype), de inhoud uitlijning, achtergrond afbeelding, zo ongeveer alles in te stellen. Spelen rond. Inspiratie kan gevonden worden op de lijst van CSS-eigenschappen en waarden. Bij het geven van maten, en kunnen zelfs van toepassing zijn grafische filters .

Automatisering ontwerp

In plaats van het instellen van een directe blik op de stijl van elk vak, kunt u een stylesheet te schrijven om hem te zijn:

Wanneer blijkt in de pagina-tag <input> heeft een gele achtergrond en donker blauwe grens, in het rode lettertype (blivajz leuk, maar het is gewoon een idee). Een dergelijke opmaak kunnen niet passen op de bevestigingsknop <input type="submit"> omdat het zou lijken op een invoerveld. Daarom adviseer ik u een klasse (klasse) .tlacitko en label het wat zijn de knoppen: <input type=submit class="tlacitko"> anders op het scherm (marine achtergrond en geel lettertype).

Valkuilen

Hoogte en breedte dozen kunnen worden gecontroleerd met behulp van CSS in oudere browsers, maar heeft een hogere prioriteit instelling (HTML size attribuut).
Voor de checkbox <input type="checkbox> in de meeste browsers kan niet aanpassen kleur binnenplaats - is nog steeds wit De enige truc is om wit te gebruiken in kleur met de transparantie van de chroma filter:.
{filter: chroma(color=#ffffff); width: 1em; }
waar de ene dimensie wordt gegeven gewoon om zeker te zijn dat de filter functie. Maar het werkt alleen in IE, Firefox niet weet niet de oplossing.

Selecteer niet bijna het werk

Drop-down menu aan de zijkant bladeren <select> CSS naar behoren werken. Niet nauwelijks werken op het dan css stijl of schilderen schuifbalken . Het enige dat de tekstkleur en de achtergrond <optie> tag kunt instellen. Selecteer de top en nog steeds houdt het negeren van z-index . Reden problemen: dit element is het overnemen van de browser van het besturingssysteem die de css negeert.

Nieuwe Mozilla Doodles en het vakje zelf te selecteren, er zijn er problemen.

Voorkomen Vorm is nog nooit niet overnemen

Elke browser en besturingssysteem toont verschillende vormen elementen. Als u de configuratie van de weergave, zodat u graag in Windows worden in Firefox, zelfs dan ziet het er niet hetzelfde op beide Mac of Internet Explorer. Waarschijnlijk de beste overzicht van hoe de vorm uitziet in verschillende browsers is te vinden op (in het Engels).

Het ziet eruit als ... vorm

Net als elders, zelfs beboeten formuliervelden geldig stelling dat al te slecht. Let vooral op dat uw formulieren er meer uitziet als een vorm.