HTML Forms | Tags input and textarea

Form html – means of communication site with the visitor.

These are comment fields, the Send, Clear, Select button, boxes, which put checkmarks, password fields and captcha.

Form tags

<form></form> – form container

<textarea></textarea> – поле комментариев

<input> – field requiring visitor actions

<form>
     <input.......>
     <textarea>......</textarea>
</form>

<input> has a required attribute, whose value determines which type the form will have.

<input type="password"> Password field
<input type="text"> Text field
<input type="button"> Button
<input type="reset"> Reset
<input type="submit"> Submit
<input type="image" src="URL"> Кнопка картинка
<input type="checkbox"> Allows you to select multiple items Watermelon
Melon
<input type="radio"> The switch selects one item Watermelon
Melon
<input type="file"> File selection

In addition to the required attribute type, the input tag accepts a number of attributes, the values of which affect forms..

size – determines the width of the text field.

Syntax: <input type="text" size="20">

value – assigns an element value.

Depending on the form type, the value attribute values perform the following functions.:

1. For text fields, specifies the previously entered string. For example, in the form of a subscription – this is Enter your E-mail. When you fill in the field, this line disappears, and after cleaning it appears again.

<input type="text" value="Enter your E-mail">

2. For buttons, sets the text inside the button..

<input type="button" value="Button">

3. For radio buttons and checkboxes, in the value of the value attribute, a unique name is set for each flag so that the server program can determine which element the user has selected..

<input type="radio" value="one"> Watermelon
<input type="radio" value="two"> Melon

align – determines the alignment of the image text.

Takes values:

bottom – bottom alignment;

top – image alignment on the highest element of the first row;

left – left alignment;

right – right alignment;

middle – alignment of the middle of the image to the baseline;

<input type="image" src="images/10.png" align="left">

alt – alternate text image

<input type="image" alt="Любой текст">

border – adds a frame to the image. Set the frame thickness to any integer in pixels. Color – the color of the text.

<input type="image" border="2">

name -form name required to identify.

The value indicates any unique name.

<input type="Any item" name="Any name">

checked – pre-activated switch; This attribute has no values. Just his presence indicates that the switch or checkbox is already marked.

disabled – blocks the ability to change an item.

This attribute has no values. His presence blocks all activity in the form.

maxlenght – determines the maximum number of characters in the text. The value indicates any positive integer.

<input type="text" maxlenght="200">

readonly – establishes that the field and its contents cannot be changed by the user.

Comment form

The textarea tag is used to create a comment form.

The window size is set by the cols and rows attributes.

cols – Number of lines

rows – Number of columns

Their values are given by any positive integers.

Сomment<br>
<textarea name="comment" cols="40" rows="3"></textarea>

Сomment

Code page with forms

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Forms</title>
<body>
<form>
<p>Войти
<input type="password" value="Password">
<input type="text" value="Login"></p>

<p>Your gender<br>
<input type="radio" name="pol" value="muj"> Male<br>
<input type="radio" name="pol" value="jen"> Female</p>

<p>Your profession<br>
<input type="checkbox" name="builder" value="buil"> Builder<br>
<input type="checkbox" name="military" value="mil"> Military<br>
<input type="checkbox" name="farmer" value="farm"> Farmer</p>

<p>Write a few words about yourself<br>
<textarea name="comment" cols="40" rows="3"></textarea></p>

<p><input type="submit">
<input type="reset"></p>
</form>
</body>
</html>

This is pure html. If you apply the design of css, then the html form can be made much nicer.

Html-tables < < < Category > > >

This entry was posted in Html basics. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *