form label definitions and usage
In html, tags are created using the html form for user input, are common in web page, such as: registration and login pages is to use the form to achieve.
Generally form a complete control by the form (also known as form elements), suggesting that three parts constituting the information and form fields.
Tags typically have a lot of form sub-elements, used to define a variety of interactive controls (text fields, check boxes, radio buttons, submit buttons, etc.), such as <input>, <button>, <select>, <textarea > and other labels.
Form controls:
It contains the actual form functional items, such as single-line text input box, the password input box, check box, Submit button, Reset button and the like.
Message:
A form usually need to include descriptive text, and prompts the user to fill operation.
Form fields:
common attributes:
- Action
when the form information is collected, the information needs to be passed to the server for processing, action attribute specifies the address of the server to receive and process program url form data. - method
Submit form data for setting a way to get its value or post. - name
specifies the name of the form, to distinguish multiple forms of the same page.
Note: Each form should have its own form fields.
<form action="提交地址" method="提交方式">
表单内容
</form>
He acts as a container for receiving all of the message and form controls, the method can be submitted to the server by his form data definition processing program url addresses, and data. If you do not define the form fields, form data can not be transferred to the backend server.
input controls
input tags for a single label, type attributes its most basic attribute, whose value variety, used for different types of specified control. In addition to the type attribute, you may be defined in many other attributes that common properties shown in the following table.
type describes the form of those
radio if it is a group, we must give them the same name name name so that you can achieve more than one selected them.
label label
label tags for input element defines the label (tag).
action table: element is used to bind a form, click on the label when the label, the bound form elements will get the input focus.
How to bind elements?
for attribute specifies the label with which form element binding.
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea control (text field)
text text box can only write one line of text it
textarea text field
if you need to enter a lot of information, you need to use <textarea> </ textarea> tag. You can easily create multi-line text input box textarea control by its basic syntax is as follows:
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
Drop-down menu
Defined drop-down menu with select controls
<select>
<option selected =" selected ">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
note:
- <Select> </ select> must contain at least one pair of <option> </ option>.
- When you define a selected = "selected" in the option, the currently selected item is the default item.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="#" type="text/CSS">
<title>表单</title>
</head>
<body>
<table height="700" width="600" align="center" border="0" cellspacing="0" cellpadding=
"0">
<caption><h2>账号注册界面</h2></caption>
<tbody>
<form action="url地址" method="提交方式" name="表单名称">
<tr>
<td>性别</td>
<td>
男<input type="radio" checked="checked" name="sex">
女<input type="radio" name="sex">
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option value="">请选择年</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
<option value="">2010</option>
<option value="">2011</option>
</select>
<select>
<option value="">请选择月</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>
<select>
<option value="">请选择日</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">天津</option>
<option value="">石家庄</option>
<option value="">河南</option>
</select>
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
未婚<input type="radio" name="marriage" checked="checked">
离婚<input type="radio" name="marriage">
丧偶<input type="radio" name="marriage">
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" value="小学">
</td>
</tr>
<tr>
<td>月薪</td>
<td>
<input type="text" value="5000-8000">
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="text" maxlength="11" value="">
</td>
</tr>
<tr>
<td>昵称</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
可爱<input type="checkbox" name="love">
御姐<input type="checkbox" name="love">
温柔<input type="checkbox" name="love">
贤惠<input type="checkbox" name="love">
辣妹<input type="checkbox" name="love">
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="text" value="请输入验证码">
<input type="reset" value="刷新">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="image/btn.png">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox">
<strong>我同意注册条款和会员加入标准</strong>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#"><p>我有账号，立即登录</p></a>
</td>
</tr>
</form>
</tbody>
</table>
</body>
</html>
