Form supplement - form field

Form field object

Form fields include text boxes, multi line text boxes, password boxes, hidden fields, check boxes, radio boxes and drop-down selection boxes, which are used to collect data entered or selected by users

Text box

Text box is a form object that allows visitors to enter their own content. It is usually used to fill in a single word or short answer, such as name, address, etc

Code format:＜input type="text" name="..." size="..." maxlength="..." value="..."＞

Password box

Is a special text field used to enter a password. When visitors enter text, the text will be replaced by asterisks or other symbols, and the input text will be hidden.

Code format:＜input type="password" name="..." size="..." maxlength="..."/＞

Hidden domain

Hidden fields are invisible elements used to collect or send information. For web page visitors, hidden fields are invisible. When the form is submitted, the hidden field will send the information to the server with the name and value defined when you set it.

Format code:＜input type="hidden" name="..." value="..."＞

Check box

The check box allows more than one option to be selected among the options to be selected. Each check box is a separate element and must have a unique name.

Code format:＜input type="checkbox" name="..." value="..."＞

Radio box

When visitors are required to choose the only answer in the options to be selected, they need to use the radio box.

Code format:＜input type="radio" name="..." value="..."＞

You must write the same name value to select one at a time

File upload box

Sometimes, users need to upload their own files. The file upload box looks similar to other text fields, but it also contains a browse button. Visitors can enter the path of the file to be uploaded or click the Browse button to select the file to be uploaded

Code format:＜input type="file" name="..." size="15" maxlength="100"＞

Multiline text box

It is also a form object that allows visitors to enter their own content, but it can let visitors fill in long content.

Code format:＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞

Drop down selection box

The drop-down selection box allows you to set multiple options in a limited space.

＜select name="..." size="..." multiple＞

＜option value="..." selected＞...＜/option＞

...

＜/select＞

Form exercise

The code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h1>Xiao Ming's application form</h1>
				<form>
					<p>
						user name:<br>
						<input type="text" name="usename" placeholder="mobile phone/mailbox/user name" style="width: 245px;"/>
					</p>
					<p>
						password:<br>
						<input type="password" name="pwd" placeholder="password" style="width: 245px;"/>
					</p>
					<p>
						Confirm password:<br>
						<input type="password" name="pwd" placeholder="password" style="width: 245px;"/>
					</p>
					<p>
						hobby:<br>
						<input type="checkbox" name="like" id="like1" value="sing" /><label for="like1">sing</label>
						<input type="checkbox" name="like" id="like2" value="dance" /><label for="like2">dance</label>
						<input type="checkbox" name="like" id="like3" value="Swimming" /><label for="like3">Swimming</label>
						<input type="checkbox" name="like" id="like4" value="read a book" /><label for="like4">read a book</label>
						<input type="checkbox" name="like" id="like5" value="play with the smarthphone" /><label for="like5">play with the smarthphone</label>
					</p>
					<p>
					Gender:<br>
					<input type="radio" name="sex" id="sex1" value="male" /><label for="sex1">male</label>
					<input type="radio" name="sex" id="sex2" value="female" /><label for="sex2">female</label>
					<input type="radio" name="sex" id="sex3" value="secrecy" /><label for="sex3">secrecy</label>
					</p>
					<p>
						Upload photos<br>
						<input type="file">
					</p>
					education<br>
					<select>
						<option value ="doctor">doctor</option>
						<option value ="undergraduate">undergraduate</option>
						<option value ="specialty">specialty</option>
						<option value ="graduate student">graduate student</option>
					</select>
					<p>
						Personal signature<br>
						<textarea rows="10" cols="40"></textarea>
					</p>
					<input type="submit" value="Sign up now" style="width: 200px;height: 40px;"/>
					<input type="reset" value="Reset">
					<input type="button" value="agree">
				</form>
		</div>
	</body>
</html>

Keywords: Javascript Front-end html5

Added by harmclan on Mon, 28 Feb 2022 12:37:02 +0200

Programming VIP