表单

一.表单
所有的表单元素都包在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;