HTML Forms

What is HTML Form

HTML forms are used to control collected information from website visitors. Web forms consist of a set of text fields, buttons, lists, and other controls that are activated with a mouse click. Technically, the forms transmit data from the user to the remote server.

All form starts with tag <form> and ends with tag </form>.

Parameter method indicates the method of data transfer.

There are two methods: GET and POST. GET : using this method, the data will be added to the end of the site address (URL), and we will see it in the address bar.

If we transmit using the POST method, the data will be transmitted hidden from the user.

Example of HTML form | Sign to website

Code


<title>One of the examples of HTML form</title>

</head>

<body>
    
<form  name="f1" method="get" action="/materials/info-html/forms/">
 
<input name="link" type="hidden" value="index.html" />
   
Login: <br />

<input name="login" type="text" size="25" maxlength="30" value="Nick" /> <br />

Password: <br />
<input name="pd" type="password" size="25" maxlength="30" value="" /> <br />

<input name="remember" type="checkbox" value="yes" />
Remember me <br />

<input type="submit" name="enter" value="Вход" />

</form>

</body>

</html>

Tags and attributes

<form> </form> – defines form.
name="" – defines name of form.
method="" – defines the method of sending data from the form. Method: "GET" (by default) and "POST". "POST" is used more often, since it allows the transfer of large amounts of data.
action="" – defines the url by which data is sent for processing. In our case,/materials/info-html/forms/. Also there can be an email action="mailto:ab-w.net".
<input /> – оdefine such form elements as buttons, switches, text fields for data input.
type="text" – defines a text field for data input.
type="password" – defines the field for entering the password, while the text is displayed in the form of asterisks or circles.
type="checkbox" – defines the switch.
type="submit" – defines the button..
type="hidden" – defines a hidden form element - is used to transfer additional information to the server.
size="25" – the length of the text field in characters.
maxlength="30" – the maximum number of characters entered.
value="" – defines the value that will be sent for processing if it relates to radio buttons or switches. The value of this attribute in the text box or button will be shown as, for example, Nick or Login in the example above.

Example of HTML form | Comments

Code


<title>Example of HTML form</title>

</head>

<body>
    
<form action="/materials/info-html/forms/" method="post" name="commentform" id="commentform">

<p><input type="text" name="author" id="author" value="" size="25" />

<small> Name</small>
</p>


<p><input type="text" name="email" id="email" value="" size="25"  />

<small> e-mail</small>
</p>

<p><textarea name="comment" id="comment" cols="48" rows="8"> </textarea>
</p>

<p><input name="submit" type="submit" id="submit"  value="Send" />

 
</p>


</form>

</body>

</html>

Tags and attributes

<textarea> </textarea> – defines text field in a form.
cols="" – defines number of columns of text field.
rows="" – defines number of rows of text field.

Example of HTML form | Drop-down list

Code

 
<title>Example of HTML form</title>

</head>

<body>
    
<form action="/materials/info-html/forms/" method="post" name="drop_down_box">

<select name="menu"     size="1">

<option value="first">First choice</option>

<option selected="selected" value="second">Second choice</option>

<option value="third">Third choice</option>

<option value="fourth">Fourth choice</option>

</select>

</form>

Tags and attributes

<select> </select> – define a list with positions for selection.
size="" – determines the number of visible positions in the list. If the value is 1, we are dealing with a drop-down list.
<option> </option> – determine the positions of the list.
value="" – contains the value that the form will send to the specified url for processing.
selected="selected" – highlights the position of the list as an example.

Example of HTML form | Scroll bar list

Code

 
 <title>Example of HTML form</title>

 </head>

 <body>
    
<form action="/materials/info-html/forms/" method="post" name="drop_down_box">

<select name="menu"    size="3" multiple="multiple">

<option value="first">First choice</option>

<option selected="selected" value="second">Second choice</option>

<option value="third">Third choice</option>

<option value="fourth">Fourth choice</option>

</select>

</form>