HTML-12.1-Form Label

HTML-12.1-Form Label

< form > < form element > < / form element > < / form > < / form >

  • Form is mainly responsible for data acquisition function in Web pages.
  • Three basic components of a form
    • form
    • form field
    • Form button

  • Form elements are tags in HTML
    • All form tags in browsers have special appearance and default functions

First: Form Label Properties

  • name
    • The name of the form, used by js to manipulate or control the form
  • id
    • The name of the form, used by js to manipulate or control the form
  • action
    • Specify a handler for form data, typically PHP
    • action="login.php"
  • method
    • Form data submission
      • get
        • Data is transmitted through the url (Unified Resource Locator) address, and the data is displayed in the url
        • Data transmission is limited in size. It is relatively unsafe depending on the size of the browser's data.
        • Append form data in the form of "name=value" to the back of the action-specified handler, separated by the "?" separated by the "?" name=value "&" number of each form
        • Submitted data types are limited to ASCII characters
      • post
        • Data is not transmitted through url address, which is relatively safe.
        • There is no specific size limit for data transmission
        • Send (hide) form data directly to the action-specified handler, which can obtain form data.
        • The data submitted are in a variety of formats (word, excel, rar, img)
  • enctype
    • Encoding of Form Data (Encryption)
    • Can only be used under POST
    • This property must be added if there is a file upload in the form
    • Specify attribute values
      • application/x-www-form-urlencoded
      • Multpart/form-data for file transcoding
	<form action="" method="post" enctype="multipart/form-data">

2: Input label (text box)

  • <input>
  • Used to receive user input
  • <input type="text" />


  • Type= "attribute": text type
    • text
      • default
    • password
      • Password type
    • radio
      • By default, radio boxes are not mutually exclusive
      • You need to set the name attribute to add a radio box with the same name to a group with the same name. The radio boxes in a group are mutually exclusive.
    • checkbox
      • Multi-select buttons, buttons with the same name are selected as a group
    • checked
      • Default the radio button or multiple button to be selected
    • hidden
      • Hidden domain, which contains information in the form that the user does not want to see
      • Quietly collect user information
    • button
      • Ordinary buttons, combined with js code for use
    • submit
      • Submit buttons to send data from the current form to the server or other programs for processing
      • This button does not need to write value, it will automatically have "submit" text.
      • The form is submitted to that page in the action attribute of the form tag.
    • reset
      • Reset the button, empty the contents of the current form, and set it to the original default value
    • image
      • Picture button, and submit button function is exactly the same, but the picture button can display pictures.
    • file
      • File Selection Box
    • email
      • mailbox
      • Add regular expressions to verify that the mailbox format of the input is correct


  • value= "content"
    • Default content in text box (already filled in)


  • size="50"
    • Fifty characters can be displayed in the presentation text box
    • A character counts in either English or Chinese.
    • The unit of attribute value is not the pixel


  • readonly
    • Text box read-only, not editable
    • The cursor can be pointed in, but the text cannot be edited.


  • disabled
    • Text box read-only, not editable, cursor does not go in
    • Attribute values can be written without writing
	<!-- Input label -->
	<form action="" method="post" enctype="multipart/form-data">
		Please enter a user name:
		<input type="text" name="username" value="" placeholder="User name" readonly="readonly"> <br>
		Please input a password:
		<input type="password" name="password" value="" placeholder="Password" disabled="disabled"> <br>
		<input type="radio" name="sex" value="boy" checked="checked"> male
		<input type="radio" name="sex" value="girl"> female <br>
		<input type="checkbox" name="like" value="fb" checked="checked"> Football
		<input type="checkbox" name="like" value="si" checked="checked"> Swimming
		<input type="checkbox" name="like" value="bk"> Basketball <br>
		Please select the file:<br>
		<input type="file"> <br>
		<input type="image" src="../zxc/backgroud.jpg" title="Background image" width="100px"> <br>
		<input type="reset" name="reset" value="Reset">
		<input type="button" name="button" value="Submission">

Three: Dropdown List Tags

  • <select></select>
  • Each item in the < Select > label is represented by < option >
    • select: select
    • option: Options
  • select tags, like ul, ol, dl, are group Tags

1. Attributes of <select> Label

  • name
    • Name
  • multiple
    • You can select multiple options from the drop-down list
    • No attribute value
  • size="3"
    • If the attribute value is greater than 1, the list is a scrolling view
    • The default attribute value is 1, which is the drop-down view.

2. Attributes of <option> Label

  • selected
    • Pre-selected
    • No attribute value
	<form action="" method="post" enctype="multipart/form-data">
		<!-- Dropdown list label -->
		<!-- size: Attribute value defaults to 1, that is, to try for the drop-down -->
		<select name="xueli" size="3" multiple="">
			<!-- selected: Pre-selected, no attribute value -->
			<option selected="">Primary school</option>
			<option selected="">Junior middle school</option>
			<option>high school</option>
			<option>Junior College</option>

IV: Multi-line Text Input Box

  • < textarea > label
    • Text is text.
    • area is the region.

  • attribute
    • value
      • Values submitted to the server
    • rows="4"
      • Number of rows in the specified text area
    • cols="20"
      • Number of columns in the specified text area
    • readonly
      • read-only
    • placeholder
      • Provide hints describing expected values of input fields
      • This prompt will be prompted when the input field is empty and will disappear when the field gets focus.
	<form action="" method="post" enctype="multipart/form-data">
		Please enter a brief introduction:<br>
		<!-- Multi-line text input box -->
		<textarea name="textarea" cols="20" rows="5" placeholder="Simply describe yourself"></textarea> <br>

			stay textarea Label pairs don't need to be written
			Written words are the default text for this box
		<textarea name="textarea" cols="20" rows="5">Monday</textarea> <br>

		<!-- The text area is newline, and the effect of display is blank. -->
		<textarea name="textarea" cols="20" rows="5">
		</textarea> <br>

		<textarea name="textarea" cols="20" rows="5" readonly="readonly">


V: Semanticization of Forms

  • <fieldset></fieldset>
  • When registering the information of a website, part of it is required and part of it is optional.
    • Form semantics can be leveraged
		<legend>account information</legend>
		Full name:
			<input type="text" name="uesrname" placeholder="Please enter your name."> <br> <br>
			<input type="password" name="password" size="21" placeholder="Please input a password"> <br>

		<legend>Other information</legend>
			<input type="radio" name="sex" value="boy" checked> male
			<input type="radio" name="sex" value="girl"> female <br>
			<select name="xueli">
				<option value="0">Primary school</option>
				<option value="1">Junior middle school</option>
				<option value="2">high school</option>
				<option value="3">University</option>
			</select> <br>
			<input type="checkbox" name="love" value="swim"> Swimming 
			<input type="checkbox" name="love" value="football"> Football 
			<input type="checkbox" name="love" value="basketball"> Basketball <br>
			Personal introduction:<br>
			<textarea name="textarea" id="" cols="30" rows="5" placeholder="Please introduce yourself."></textarea>

6: < label > label

  • Any form element has label
For such a radio box
 We can only select it by clicking on the radio box (small circle).
When you click on the words "man" and "woman", you can't select them.
So label tags come in handy.
<input type="radio" name="sex" value="boy" checked> male
 <input type="radio" name="sex" value="girl">female<br>
  • Essentially, the words "man" and "woman" have nothing to do with the input tag, and label is the solution to this problem.
  • We can wrap input and Chinese characters as a whole through label.
	<! - The label of the radio box - >
	<form action="" method="post" enctype="multipart/form-data">
			input elements have an id attribute
			The label tag has a for attribute, the same as the id
			There is a binding relationship between label and input
		<input type="radio" name="sex" value="boy" id="boy" checked="checked">
		<! - wrap input and Chinese characters as a whole through label
		<label for="boy">man</label>
		<input type="radio" name="sex" value="girl" id="girl">
		<label for="girl">female</label>
	<!-- Checkbox label -->
	<form action="" method="post" enctype="multipart/form-data">
		<input type="checkbox" name="like" value="football" id="football">
		<label for="football">Football</label>
		<input type="checkbox" name="like" value="swim" id="swim">
		<label for="swim">Swimming</label>
		<input type="checkbox" name="like" value="baseketball" id="baseketball">
		<label for="baseketball">Basketball</label>

Tags: Attribute PHP ascii Excel

Posted on Thu, 05 Sep 2019 04:44:31 -0400 by brad.techguy