HTML表单标签
列表标签
表格是⽤来显⽰数据的，那么列表就是⽤来布局的
列表最⼤的特点就是整齐、整洁、有序，它作为布局会更加的⾃由和⽅便。
列表可以分为⽆序列表，有序列表，⾃定义列表。
⽆序列表
ul标签表⽰HTML页⾯中项⽬的⽆序列表，⼀般会以项⽬符号呈现列表项，⽽列表项使⽤li标签定义。
基本语法
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
各个列表项之间没有顺序之分。
ul标签⾥⾯只允许放⼊li标签。但是li标签⾥⾯可以放⼊任何的元素。
有序列表
字⾯理解就是对列表项元素进⾏排序啦
我们使⽤ol标签定义有序列表，列表排序以数字来显⽰，并且使⽤li标签来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
有序列表会⾃动给我们的列表项排序。
ol标签⾥⾯只允许放⼊li标签。但是li标签⾥⾯可以放⼊任何的元素。
⾃定义列表
⾃定义列表常⽤于对术语或者名词进⾏解释或者描述，⾃定义列表的列表项没有任何的项⽬符号。
语法格式
使⽤dl标签⽤于定义描述列表或定义列表，该标签会与dt(定义项⽬/名字)和dd(描述每⼀个项⽬/名字)⼀起使⽤。<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
dl⾥⾯只能包含dt标签。dt和dd的个数没有限制，经常是⼀个dt对应多个dd。
表单标签
表单的主要⽬的是⽤来收集⽤户信息。
在HTML中⼀个完整的表单通常由表单域，表单控件(也称为表单元素)和提⽰信息三个部分构成。
表单域
表单域是⼀个包含表单元素的区域。
在HTML中，form标签⽤于定义表单域，以实现⽤户信息的收集和传递。
form会把它范围内的表单元素信息提交给服务器。
<form action = "URL地址" method = "提交⽅式" name = "表单域名称">
各种表单元素控件
</form>
常⽤的属性
属性属性值作⽤
action URL地址⽤于指定接收并处理表单数据的服务器程序的URL地址
method get/post⽤于指定表单数据的提交⽅式，其取值为get/post
name名称⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单域
表单控件
在表单域中可以定义多种表单元素，这些元素就是允许⽤户在表单中输⼊或者选择的内容控件。
1、input输⼊表单元素
在input标签中，包含⼀个type属性，根据不同的type属性值，输⼊字段拥有很多种形式(⽂本，字段，复选框，掩码后的⽂本控件，单选按钮，按钮等) <input type="属性值"  />
input单标签，根据type属性值的不同，可输⼊的表单元素不同。
在此插⼊图⽚
input标签的⼀些其他属性
属性属性值描述
name由⽤户⾃定义定义input元素的名称
value由⽤户⾃定义规定input元素的值
checked checked规定此input元素⾸次加载时应当被选中，主要针对于单选框和复选框
maxlength正整数规定输⼊字段中的字符的最⼤长度
注意：
1、**name 是表单元素名字这⾥性别单选按钮必须要有相同的名字name，才可以实现多选1 ****
2、name和value是每个表单元素都有的属性，主要给后台⼈员使⽤。
3、name表单元素的名字，要求单选按钮和复选按钮都要有相同的name值。
input的另外两个属性submit和reset。
submit和reset
<input type="submit" value = "提交">
<input type="reset" value = "重置数据">
button
点击button不会提交数据，主要⽤于如获取短信验证码。(后期结合js来使⽤)
<input type = "button" value = "获取短信验证码"
file
主要⽤于可以如⽤来上传⽂件(⽂件域)
上传头像： <input type="file">
label标签
label标签为input元素定义标注(标签)
label标签⽤于绑定⼀个元素，当点击label标签内容内的⽂本时，浏览器就会⾃动将焦点(光标)转到或者选择对应的表单元素上，⽤来增加⽤户体验。<label for = "sex">男</label>
<input type = "radio" name ="sex" id = "sex"/>
由此可知，label标签的for属性应当与相关元素的id属性相同，⼆者才能建⽴联系。
2、select下拉表单元素
使⽤场景：在页⾯中，如果有多个选项让⽤户选择，并且想要节约页⾯空间时，我们可以使⽤select标签定义下拉列表。<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
....
</select>
在select中⾄少包含⼀对option。
在option中定义selected="selected"时，当前即为默认选中项。
html ul标签3、textarea
使⽤场景：当⽤户输⼊内容较多的情况下，我们就不能使⽤⽂本框表单了，此时我们可以使⽤textarea标签。
⽤于定义多⾏⽂本输⼊的控件。
<textarea rows="3" cols ="20">
⽂本内容
</textarea>//cols="每⾏中的字符数"，rows="显⽰的⾏数"。(后期使⽤CSS来改变⼤⼩，在此可以做了解)
以上内容来⾃[]()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。