Making Forms and Input Elements


In order to create the form above, here’s the html markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Week 04 - Contact Form</title>
	<!--This is the class example by Doris Yee-->

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

	<div id="container">

		<div id="example-form">

			<form>
				<label for="Name">Name:</label>
				<input type="text" name="name" id="name" />

				<label for="City">Tel No:</label>
				<input type="text" name="telephone" id="telephone" />

				<label for="Email">Email:</label>
				<input type="text" name="email" id="email" />

				<label for="Message">Message:</label><br />
				<textarea name="message" rows="10" cols="20" id="message"></textarea>

				<input type="submit" name="submit" value="Submit" class="mybutton" />
			</form>

			<div style="clear: both;"></div>

		</div>

	</div>

</body>

</html>

The two HTML elements used to create text boxes (also known as text fields) are input and textarea. These are described below:

INPUT

Making Forms and Input Elements (provided by Doris Yee)

The input element will create a single-line text box when the type="text" attribute value pair is used. Only the start tag <input> is used. The end tag is omitted. You will also require a name="control_name" attribute-value pair where control_name equals the control name (whatever you want) that you assign to this text box. This control name will be used by the script that processes this form to retrieve the data entered into this text box. Each input text box must have a different control name. To talk to input fields from a stylesheet, look below:


input {

/*insert styles here*/

}

TEXTAREA

Making Forms and Input Elements (provided by Doris Yee)

The textarea element creates a multi-line text box. It requires both a start tag <textarea> and an end tag </textarea> and the rows and cols attributes are used in the start tag to define its display size. These attributes are described below:

  • rows="number_of_lines" — This attribute-value pair specifies the height according to the number of text lines you wish the textarea box to display.
  • cols="width_in_characters" — This attribute-value pair specifies the width according to the number of character widths you wish textarea box to display.

Also, like the input text boxes, we have to include the name="control_name" attribute-value pair where control_name equals the control name (whatever you want) that you assign to this text box. Hence if we insert the following code inside our form element. To talk to textareas with CSS, this is the markup in the stylesheet:


textarea {

/*insert styles here*/

}

SUBMIT BUTTON

Making Forms and Input Elements (provided by Doris Yee)

Now let’s create a submit button that the user can click on to activate  form after entering his or her information. Once again we’ll use the input element but this time we’ll insert the type="submit" attribute-value pair. To customize the text that is displayed on the submit button, you can use the value="your text" attribute-value pair where your text can be anything you want. To address this in a stylesheet, refer to the class that you’ve provided to it:


input.mybutton {

/*insert styles here*/

}



© 2011. All Rights Reserved

TopTop