Article Directory
In HTML, a complete form usually consists of three parts: form fields, form controls (also called form elements), and prompt information. Usage scenario: Submit form elements in the area to the backend server
1. Form fields
<form action="url" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
1.1 Common attributes:
| Attributes | Attribute value | effect |
|---|---|---|
| action | url address | Used to specify the address of the server program that receives and processes form data |
| method | get/post | Set the form data submission method |
| name | name | Specify the name of the form to distinguish multiple form fields on the same page |
2. Form controls (form elements)
Various form elements can be defined in the form field. These form elements are content controls that allow users to input or select in the form.
Next we explain:
- input form element
- select drop-down form element
- textarea text area element
2.1 input input form elements
(1) Text password box with type attribute
In the <input>label, contains a typeproperty, depending on the typeattribute value, the input field has a wide variety of forms (either text fields, check boxes, text control after the mask, radio buttons, buttons, etc. ).
<input type="属性值" />
- Single label
- The type attribute sets different attribute values to specify different control types
The attribute value of the type attribute and its description are as follows: For
example:
<form>
账号：<input type="text" />
<br/>
密码：<input type="password"/>
</form>
(2) Realize radio buttons and check boxes
In addition to the type attribute, the tag has many other attributes. The commonly used attributes are as follows:
- The name and value are the attribute values of each form element, which are mainly used by back-end personnel .
- name The name of the form element, the radio button and the check box must have the same name value .
- We checked on the property mainly for radio buttons and check boxes, a major role in opening a page will be the default option of a form element.
- maxlength is the maximum number of characters that the user can enter in the form element, and it is rarely used.
<form>
账号：<input type="text" value="123456"> <br>
密码：<input type="password" value="123456"> <br>
<!-- 用radio属性实现单选，name属性值相同 -->
性别：男<input type="radio" name="1" value="男"> 女<input type="radio" name="1" value="女"> <br>
<!-- 用checkbox属性实现单选 -->
喜好：吃饭<input type="checkbox" name="eat" value="吃饭"> 睡觉<input type="checkbox" name="sleep" value="睡觉">
</form>
(3) submit and reset buttons
<form action="xxx.php" method="post">
<!--内容会提交给后台-->
<input type="submit" value="注册">
<input type="reset">
</form>
(4) label
<label>The label defines the label (label) for the input element.
<label>Tag is used to bind a form element, click on the <label>text within the tag, the browser will automatically focus (cursor) to select or form the corresponding elements used to increase the user experience.
<label>Tag for 属性should be associated with the element id 属性The same .
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
2.2 Select drop-down form element
Usage scenario: In the page, if there are multiple options for the user to choose, and we want to save page space, we can use the <select>label control to define a drop-down list.
<select>Contains at least one pair<option>.- When
<option>definedselected =“ selected "in, the current item is the default selected item .
<form>
籍贯：
<select>
<option select="selected">请选择</option>
<option>湖北</option>
<option>湖南</option>
<option>新疆</option>
</select>
</form>
2.3 textarea text area element
Usage scenarios: when the user input of more things, we can not use the text box to the form, and then we can use <textarea>labels.
In form elements, <textarea>tags are controls used to define multi-line text input.
Use the multi-line text input control to enter more text. This control is common in message boards and comments.
<textarea rows="3" cols="20">
文本内容
</textarea>
- By
<textarea>can easily create multi-line text input box label. - cols="the number of characters in each row", rows="the number of rows displayed", we will not use it in actual development , we use CSS to change the size .
3. Large-scale example applications
Write a
code like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的诗词</title>
</head>
<body>
<h2>青春不常在，抓紧谈恋爱</h2>
<table width="600">
<!-- 性别 -->
<tr>
<td>性别</td>
<td>
<input type="radio" id="男" name="性别" value="男">
<label for="男"><img alt="男" src="男.png"6 width="16" height="16">男 </label>
<input type="radio" id="女" name="性别" value="女">
<label for="女"><img alt="女" src="女.png"6 width="16" height="16">女 </label><br>
</td>
</tr>
<!-- 生日-->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>2000</option>
<option>2001</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<!-- 所在地区 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 婚宴状况 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="婚姻" id="1"><label for="1">未婚</label>
<input type="radio" name="婚姻" id="2"><label for="2">已婚</label>
<input type="radio" name="婚姻" id="3"><label for="3">离婚</label>
</td>
</tr>
<!-- 学历 -->
<tr>
<td>学历</td>
<td><input type="text" value="幼儿园"></td>
</tr>
<!-- 喜欢的类型 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox">可爱的
<input type="checkbox">小鲜肉
<input type="checkbox">都喜欢
</td>
</tr>
<!-- 自我介绍 -->
<tr>
<td>自我介绍</td>
<td>
<textarea rows="3" cols="20">
自我介绍
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="www.baidu.com">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Compared:
