Textfält i formulär

Textfält och textrutor hör hemma i formulärelementet <form> och används när uppgifter ska matas in i formuläret av en användare.

Enradiga textfält

Enradiga textfält skapas med elementet <input /> när attributet type får värdet "text". Här behövs inte attributet value, eftersom v ärdet som skickas är den text besökaren skriver i fältet. Om man ändå väljer att ta med attributet value, får man en förskriven text som förstås kan ändras av den som fyller i formuläret.

<h1>Beställning</h1>
<form  name="kontakt" method="post"  action="forms/order.asp">
<p>Namn:  <input type="text" name="namn" /></p>
<p>Adress: <input type="text"  name="adress" /></p>
</form>

Med attributet size anger man hur många tecken brett textfältet ska vara.  Om man vill begränsa antalet tecken som får matas in, använder man attributet maxlength.

<p>
Telefon: <input type="text" name="telnr" maxlength="10" size="15" />
</p>

Om type får värdet "password" blir textrutan ett lösenordsfält. Även om text i lösenordsfält ser ut som prickar så skickas lösenordet i klartext.

Större textrutor

Med elementet <textarea> skapas en stor textruta som passar för lite längre meddelanden. Attributen rows och cols anger hur många textrader och tecken bred textrutan ska vara. När mer text matas in än antalet rader och kolumner anger, skapas rullningslister i rutan.

Om man skriver ett innehåll i detta element (mellan start och avslut) får rutan en förskriven text. Förskrivna texter kan dock alltid ändras eller raderas av den som fyller i formuläret.

<textarea name="meddelande" rows="7" cols="20">
Ge oss dina synpunkter!</textarea>

Om man någon gång skulle vilja använda textfältet bara som en textruta kan man ge den attributet readonly. Detta gör att texten i rutan bara kan läsas eller kopieras.

<textarea readonly="readonly" rows="5" cols="15">Kopiera denna text till
ditt eget dokument:   ...
</textarea>