Form related labels (<input> ＜fieldset＞＜button＞＜select＞＜label＞)

Form:`<from></form>`

<form name="" method="" action=""></form>
<!--action:规定当提交表单时向何处发送表单数据。
	method: get/post 规定用于发送表单数据的 HTTP 方法。
-->

<form> The element contains one or more of the following form elements:

<input>
<textarea>  ：文本框
<button>   ：按钮
<select>  ：下拉列表
<option>   ： <option> 标签定义下拉列表中的一个选项（一个条目）。
<optgroup>   ： <optgroup> 标签经常用于把相关的选项组合在一起。
<fieldset>  ：将表单内的相关元素分组。
<label> ： 为 input 元素定义标注（标记）。

input tag:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

operation result:
Insert picture description here

Common input type attribute values:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input的type</title>
</head>
<body>
 <!-- 常见input的type类型 -->
    <!-- 文本 -->
    <input type="text">
    <br>
    <!-- 密码 -->
    <input type="password">
    <br>
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">
    <br>
    <!-- 提交按钮 -->
    <input type="submit">
    <br>
    <!-- 重置按钮 -->
    <input type="reset">
    <br>
    <!-- 单选按钮 -name属性用来连接一组单选按钮-->
    <input type="radio" name="sex" disabled>男
    <input type="radio" name="sex" >女 
    <br>
    <!-- 复选框 -->
    <!-- disabled禁选disabled="disabled"  checked="checked"默认选中-->
    <h2>喜欢的偶像</h2>
    <input type="checkbox" name="like" checked>高圆圆
    <input type="checkbox" name="like">李易峰
    <input type="checkbox" name="like">杨幂
    <br>
    <h2>喜欢的名字</h2>
    <input type="checkbox" name="like2">xx
    <input type="checkbox" name="like2" disabled>yy
    <input type="checkbox" name="like2">ff
    <br>
    <h2>喜欢的运动</h2>
    <input type="checkbox" name="like3">足球
    <input type="checkbox" name="like3">篮球
    <input type="checkbox" name="like3">排球

 
   <!-- 拾色器 -->
   <h3>拾色器</h3>
   <input type="color">

       
</body>
</html>

operation result:
Insert picture description here

The checked attribute specifies that it is selected by default when the page loads
A single tag in html can <input type="checkbox">
be written without a slash . A single tag in XHTML must be written with a slash<input type="checkbox"/>

`<textarea>` : Text box

The cols attribute specifies the number of visible lines in the text area.
The rows attribute specifies the number of columns visible in the text area.
The disabled attribute specifies that the text area is disabled.
CSS property: resize: none;indicates that the text box is forbidden to drag, and the user cannot adjust the size of the element.

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

`<select>`drop-down list

multiple：当该属性为 true 时，可选择多个选项。
size="number" 规定下拉列表中可见选项的数目

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Insert picture description here

<button>Button label:

<button type="button" onclick="alert('你好，世界!')">点我!</button>

type: button/reset/submit specifies the type of button.

`<fieldset>` label:

It is equivalent to a box, which can contain text and other elements in the field set.
This element is used to group elements in the form and distinguish text in the document.
The fieldset element can be nested, and multiple fieldset objects can be set inside it.
Disabled defines the space forbidden to use (the entire set of content will be forbidden);
<legend align="left/center/right/justify"></legend> As field set title
The legend element can insert a title in the box drawn by the fieldset object. The legend element must be the first element in the fieldset.

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

Insert picture description here

`<label>`label:

The label label does not present any special effects to users, but it improves usability for mouse users. Users click on the `The browser will automatically turn the focus to the form control related to the label.
The key to the connection between label and form controls isThe for property , for property values to be the same as the id attribute related elements.

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

Insert picture description here
When you click Male and Female, the corresponding radio buttons will also be selected.

Form related labels (<input> ＜fieldset＞ ＜button＞ ＜select＞ ＜label＞)

Form:<from></form>

input tag:

Common input type attribute values:

<textarea> : Text box

<select>drop-down list

<fieldset> label: