Forms interaction (action, method, enctype, accept, accept-charset, readonly, disabled, size, maxlength, checked, selected, multiple, label, for) - BrenkoWeb

Forms interaction (action, method, enctype, accept, accept-charset, readonly, disabled, size, maxlength, checked, selected, multiple, label, for)

HTML Tutorial / HTML Attributes

By Admin

This group of attributes contains those that apply to HTML forms and users interaction with them.

Related elements:

action attribute:

method attribute:

enctype attribute:

accept-charset attribute:

accept attribute:

readonly attribute:

INPUT, TEXTAREA

disabled attribute:

INPUT, BUTTON, OPTGROUP, OPTION, SELECT, TEXTAREA

size attribute:

INPUT, SELECT

maxlength attribute:

checked attribute:

selected attribute:

multiple attribute:

label attribute:

OPTGROUP, OPTION

for attribute:

Attribute characteristics and purpose:

action attribute:

specifies an action to be performed upon form submission
the value must be a URI or otherwise will be undefined
often used to locate a script that will process the form submitted data in terms of name / value pairs

method attribute:

defines the HTTP method used upon form submission
possible values are GET (default) and POST
with the get method form data is appended to the URI specified by the action attribute, with the question mark (?) used as data separator; with the post method the form data set is included in the body of the form
the GET method is less safe because data are not hidden and protected and it is used for forms that do not require special safety measures; the POST method is used with larger forms and when there are sensitive operations that are to be executed after submission, such as database modifications and similar

enctype attribute:

specifies the content type used for submitting the form to the server
used only in combination with the POST method
default value is: application/x-www-form-urlencoded
if there is an input control with the type="file" then the enctype attribute should be set to: multipart/form-data

accept-charset attribute:

defines the list of space and / or comma separated character encodings for input data
default value is "unknown"

accept attribute:

defines a comma separated list of content types that the server should try to process correctly
browsers might use this attribute to filter out con-conforming files that are being sent to the server via input element type="file"

readonly attribute:

it's a Boolean attribute and when set it prohibits any changes to the control by a user
the element is able to be focused on, it participates in tabbing navigation and its value is sent to the server

disabled attribute:

the control is completely disabled for the user input
the element cannot receive focus, it will be skipped in tabbing navigation and it won't be processed during submission

size attribute:

<input /> - defines the initial width of the control (input field); it is given in pixels and if the type attribute is set to "text" or "password" it will refer to the number of characters
<select> - if the select element is presented as a scrolled list box, the size attribute specifies the number of initially visible rows at the same time

maxlength attribute:

used when <input /> element is set to "text" or "password" and it refers to the maximum number of characters a user might enter
the default value is "unlimited"

checked attribute:

used with <input /> element when the type attribute has its value set to "radio" or "checkbox
it's a Boolean attribute and it determines if the button is preset to "ON"

selected attribute:

it's a Boolean attribute that specifies if an option is pre-selected

multiple attribute:

it's a Boolean attribute that when set allows multiple selections by a user

label attribute:

<optgroup> - specifies the label for the option group
<option> - specifies a shorter label for an option then the content of the option element; if set then browser should use this as a label rather than the content of the option element

for attribute:

associates the label with another control
the value of this attribute must be the same as the value of id attribute of a control it is being associated with; one control may be associated with more then one label
if the for attribute is absent then the association can be made only with nesting the control inside the <label> element; in that case only one association is possible

Example

HTML form specific attributes:

<html>

<head>
<title>HTML tutorial</title>
</head> 

<body>

<form action="" method="post" name="form">

<fieldset>
	<legend>Client's name and date of birth</legend>
	First name:<br />
	<input type="text" name="fname" value="" /><br />
	Last name:<br />
	<input type="text" name="lname" value="" />
</fieldset><br />

<fieldset>
	<legend>Client's favorite fruit</legend>
	Fruit chioce:<br />
	<input type="radio" name="fruit" value="apple" checked="checked" />apple<br />
	<input type="radio" name="fruit" value="orange" />orange<br />
	<input type="radio" name="fruit" value="banana" />banana<br />
</fieldset><br />

<fieldset>
	<legend>Client's visited countries</legend>
	<select size="4">
		<optgroup label="European countries">
			<option value="bu">Bulgaria</option>
			<option value="ge" selected="selected">Germany</option>
			<option value="it">Italy</option>
			<option value="sw">Sweden</option>
		</optgroup>
		<optgroup label="Asian countries">
			<option value="ba">Bangladesh</option>
			<option value="la">Laos</option>
			<option value="ma">Malaysia </option>
			<option value="pa">Pakistan</option>
		</optgroup>
	</select>
</fieldset><br />

<fieldset>
	<legend>Comments...</legend>
	<textarea rows="3" cols="30"></textarea><br />
</fieldset><br />

<input type="submit" value="Send">
<input type="reset" value="Reset">

</form>

<h6>p.s. submitting the form will not generate any action</h6>

</body>

</html>

›› go to examples ››

31

Jan

Comments

No comments have been made yet.

Please login to leave a comment. Login now

Embedded objects (classid, data, archive, codebase, codetype, declare, standby, valuetype)

Standard intrinsic events (onclick, ondblclick, onmouseover, onmousedown, onmouseup, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress)

Forms interaction (action, method, enctype, accept, accept-charset, readonly, disabled, size, maxlength, checked, selected, multiple, label, for)