Element's type, name and value (type, name, value)

The type attribute is used in those elements where there are possibilities to assign one of a few different pre-defined controls or content types of the element

The name attribute is often applied in forms to reference the control fields but also with a number of other elements, such as frames where it is combined with the target attribute to mark a destination frame.

The value attribute is used to assign initial or run-time value of an element. It usually associates with the name attribute and together creates name / value pair that might be analyzed by a server based script.

Related elements:

type attribute:

INPUT, BUTTON, A, LINK, OBJECT, PARAM, STYLE, SCRIPT

name attribute:

FORM, INPUT, BUTTON, TEXTAREA, SELECT, FRAME, IFRAME, A, IMG, OBJECT, PARAM, MAP, META

value attribute:

INPUT, OPTION, BUTTON, PARAM

Attribute characteristics and purpose:

type attribute:

<input /> - specifies the control type being used; possible values: "text, password, checkbox, radio, submit, reset, file, hidden, image, button"; default value is "text"
<button> - specifies the control type being used; possible values: "submit, reset, button"
<a>, <link /> - advises a browser on the content type used existing at the link's address; the content type can be one of the registered MIMETYPES
<object> - specifies the content type specified by the data attribute; helps browser determine if the content type is supported
<param /> - specifies the value of a run-time parameter specified by name attribute
<style> - specifies a style sheets language as a content-type used internally
<script> - specifies a scripting language as a content-type used internally or in an external source

name attribute:

<form> - it is used to reference a submitted form (via a script); exists for backwards compatibility and id attribute should be used instead
<input />, <button>, <textarea>, <select>, <object> - assigns control's name (field's name)
<frame>, <iframe> - assigns a name to a frame and can be used as the target for frame linking
<a> - unique anchor name; used as destination of another link (an anchor); shares same space as id attribute so they cannot be used together (preferred is the name attribute)
<img> - name attribute has been replaced with id and exists for backwards compatibility
<param /> - defines the name of a run-time parameter
<map> - assigns a name to the image map defined by the element; used for backwards compatibility and id attribute should be used instead
<meta /> - identifies a property name; works in combination with the content attribute which specifies the value of the property

value attribute:

<input /> - specifies the initial value of the control; it is optional in all cases except when the type attribute is "radio" or "checkbox"
<option> - specifies the initial value of the control; if it's not specified then the default value is set to the contents of the option element
<button> - assigns the initial value of the button element
<param /> - specifies the value of a run-time parameter specified by the name attribute; the meaning of the value is determined by the object in question

Example

HTML type, name and value attribute:

<html>

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

<style type="text/css">
select {
	border:1px solid black;
	background-color:#ddd;
}
body {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
</style>

<script type="text/javascript">
	function answer(el) { 
		for (var i = el.childNodes.length-1; i >= 0; i--) {
			if (el.childNodes[i].nodeName.toLowerCase() == "option") {
				if (el.childNodes[i].selected != true && i == 1) {
					alert("Please choose something.");
					break;
				}
				if (el.childNodes[i].selected == true) {
					alert("No way! Really!");	
					break;
				}
			}
		}
	}
</script>

</head> 

<body> 

<form action="" method="post">
	<label for="persona">Choose all that apply to you:</label><br />
	<select id="persona" name="sel" multiple="multiple">
		<option value="1">I am good!</option>
		<option value="2">I am sexy!</option>
		<option value="3">I am cool!</option>
		<option value="4">I am a zombie!</option>
	</select><br />
	<button id="subm" onclick="answer(persona)">confirm</button>
</form>

<h6>Check the editor and review the attributes used in the example..</h6>		

</body>

</html>

›› go to examples ››

Element's type, name and value (type, name, value)

Related elements:

Example

HTML type, name and value attribute:

Comments

About

Contact

Get Connected