HTML5, invoerelement - deel 2

Al in het eerste deel van deze Tutorial hebben we de attributen gedefinieerd waarmee we kunnen werken, we zagen dat we een aantal nieuwe hebben voor HTML5 en andere niet, maar als het gaat om het bouwen van solide velden die ons helpen bij de essentiële processen van de site, is het wanneer de combinatie hiervan en het juiste gebruik van elk ons ​​zal helpen de best mogelijke manier te verzamelen.
De grootte van een veld instellen
Zoals we hebben gezien, hebben we twee kenmerken die rechtstreeks van invloed zijn op de grootte van een veld, namelijk: maat Y maximale lengte, de ene regelt de visuele amplitude van het veld en de andere de hoeveelheid tekst die het veld daadwerkelijk kan ontvangen.
Laten we een voorbeeld bekijken waarin beide attributen worden gebruikt:

 Voorbeeld
Jam:

Stad:
Fruit:
Stem verzenden 

In dit voorbeeld zien we hoe het eerste veld wordt gespecificeerd a maximale lengteAlleen hiermee vertellen we de browser dat deze slechts 10 tekens kan accepteren, maar hij kan de standaardbreedte toewijzen, in het tweede veld specificeren we de maat Met wat we het vertellen hoe breed het moet zijn, beperken we de tekstinvoer niet en in de derde passen we beide voorwaarden toe, laten we eens kijken hoe het werkt in de browser.

Gebruik van waarde en tijdelijke aanduiding
Nadat we het verschil tussen deze twee velden hebben gezien, gaan we in dit voorbeeld effectief demonstreren hoe we ze op een formulier kunnen toepassen, laten we kijken hoe we ze in de volgende code kunnen gebruiken.

 Voorbeeld
Jam:
Stad:
Fruit:
Stem verzenden 

Zoals we in de eerste twee velden kunnen zien, geeft de tijdelijke aanduiding een hulp aan voor wat de gebruiker moet invoeren, deze waarde die de tijdelijke aanduiding bevat is niet de waarde van het invoerveld, dus als we deze velden indienen, zullen ze leeg aankomen, in plaats daarvan derde veld Er is al iets in het waardeattribuut geplaatst, dit als het zou worden doorgegeven bij het indienen van het formulier.
Laten we eens kijken hoe de browser ons dit zou laten zien

Alleen-lezen velden maken
Soms moeten we werken met alleen-lezen velden, ofwel omdat de waarde niet door de gebruiker moet worden gewijzigd of omdat het louter informatief is. Het kan ook zijn dat het het resultaat is van een eerdere filtering door de gebruiker en alleen deze waarde kan worden gezien, hiervoor hebben we twee opties die, hoewel ze hetzelfde lijken, totaal verschillend zijn.
We hadden het attribuut al gezien alleen lezen en we weten dat het zo is dat het veld niet kan worden gewijzigd, we hebben ook het attribuut gehandicapt, heeft dezelfde functie als alleen lezen, maar bij het doen indienen Alle velden gehandicapt ze worden niet ingediend dus het is alsof het niet bestaat in het formulier.
Laten we het bovenstaande uitleggen met een praktisch voorbeeld.

 Voorbeeld
Jam:
Stad:
Fruit:
Stem verzenden 

We kunnen zien dat het eerste veld is uitgeschakeld en het tweede in alleen-lezen, wanneer het uitgeschakelde veld in de browser wordt weergegeven, verschijnt het met een grijze kleur, meestal geassocieerd met niet inschakelen, terwijl het alleen-lezen wordt gezien als een normaal veld, hoewel als we proberen om naar iemand te schrijven, niemand laat ons tekst invoeren.
Laten we eens kijken hoe het voorbeeld is:

Hiermee voltooien we dit tweede deel van de tutorial, we zijn nu in staat om onze formulieren te verbeteren met behulp van basisvalidaties van grootte en hoeveelheid tekst en ook om te bepalen wat de gebruiker kan wijzigen of niet, naast het kunnen tonen van hulp in de velden zodat hij een idee heeft waar je wel of niet naar binnen moet.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven