一.表单
所有的表单元素都包在form内
1.输入元素
<!--name用来进行标识，value是该复选框的值，如果提交到后台程序，传过去的值就是它了-->
First name: <input type="text" name="firstname"><!--文本域-->
Password: <input type="password" name="pwd">
<input type="radio" name="sex" value="male" checked>Male<!--单选按钮,checked默认选中；多单选按钮，name值一致的为一组，防止出现双选-->
<input type="checkbox" name="vehicle" value="Car">I have a car<!--复选框-->
<input type="submit" value="Submit"><!--提交按钮，reset重置按钮，button纯按钮-->
2.下拉列表
<!--无组别下拉列表-->
<form action=""><!--action后跟url, 表示提交表单后，数据发到哪里-->
<select name="cars">
<!--selected，默认选中-->
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
</select>
<!--分组下拉列表-->
<select>
<optgroup label="组别1">
<!--label，加粗类别-->
<option value="food">食物</option>
</optgroup>
<optgroup label="组别2">
<option value="type">类型</option>
</optgroup>
</select>
</form>
3.文本域
<!--cols为文本域宽度，rows为行数-->
<textarea rows="10" cols="30">我是一个文本框。</textarea>
4.纯按钮
<button type="button"></button>
<!--submit提交按钮，reset重置按钮，button纯按钮-->
5.表单带边框
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" placeholder="new"><br><!--placeholder显示默认灰色字符串-->
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
1111.png
6.改进鼠标用户可用性
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
</form>
<!--"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值，也可以直接书写文本，但这样更规范，利于维护-->
7.定义的输入控件选项列表
<!--用input的list去绑定datalist的id-->
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
Screenshot_20200805_171428.png
8.滚动条
<!--这里value是设置-->
0<input type="range" id="a" value="50">100
9.密钥加密
<keygen name="security">
10.文件上传
<!--multiple支持多选-->
<input type="file" multiple>
11.label标签使用方法
1.
<!--1.使用label标签把内容包裹起来；2.在表单标签上添加id属性；3.在label标签的for属性中设置对应的id属性值-->
<input type="text" id="sex"><label for="sex">男</label>
2.<label><input type="text">男</label>
12.取消表单的轮廓线
outline:none;
