表单标签
作用:收集用户信息,提交数据给服务器
<form action="1.html" method="get" enctype="">
账号:<input type="text" name="username"><br>
密码:<input type="password" name="pwd"><br>
性别:男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密"><br>
爱好:英雄联盟<input type="checkbox" name="hobby[]" value="英雄联盟">
王者荣耀<input type="checkbox" name="hobby[]" value="王者荣耀">
魔兽世界<input type="checkbox" name="hobby[]" value="魔兽世界"><br>
上传图片<input type="file" name="pic"><br>
隐藏框<input type="hidden" name="hidden" value="123">
提交框<input type="submit">
重置框<input type="reset">
普通框<input type="button" value="登录">
</form>
< form>主要属性:
- action:传参的对象
- method:传参的方式 (get/post)
- enctype:设定上传文件MIME格式
< input>主要属性:
- type:设定标签的样式类型
- text:文本框
- password:密码框
- redio:单选框(单选框必须与标签name属性配合使用)
- checkbox:多选框 file:上传文件选项框
- hidden:隐藏框
- submit:提交按钮
- reset:重置按钮
- button:普通按钮
- tel:电脑端无效果,手机端会自动显示数字键盘
- name:设定标签名称,传参时有特定属性
- value:设定标签的初始值
- minlength:设定输入内容的最小字符长度
- maxlength:设定输入内容的最大字符长度 placeholder:占位符(灰色文字,多用于输入内容提示作用)
- checked:默认选中,布尔值
- readonly:只读,无法修改内容,可以传参,布尔值
- disabled:禁用,无法修改内容,不能传参,布尔值
- required:禁止内容为空,布尔值
- auto_complete:自动保存数据信息,同一个浏览器,同键名默认会有提示实际项目中,需要关闭此功能,防止数据泄露 autocomplete=“off”
- autofocus:光标默认焦点,布尔值
传参必须要有name属性值,单选,多选,隐藏框必须要有value属性值,value对file属性不起作用,如果多个标签传递参数,但是标签name属性的属性值都相同,必须给name属性添加[],方括号,常见checkbox以及file
label标签
<form>
<!-- 第一种用法 -->
<label>
<input type="checkbox">吃
</label>
<!-- 第二种用法 -->
<input type="checkbox" id="c2">
<label for="c2">
吃
</label>
</form>
- 语法形式1: 将标签与文字都作为
- 语法形式2: 将文字作为
两种方法区别:
< label>标签,嵌套的内容不同,后期css或者JavaScript执行对象不同
<textarea>文本域
<form action="01.html" method="get">
<textarea name="liuyan" style="resize:none;width:200px;height:100px;">北京</textarea>
</form>
可以换行的文本框
可以通过css样式设置文本域的大小,如果超出范围,显示为滚动条
传参不支持value属性,传递的参数为标签的内容
文本域中所有的输入内容都会作为传参数据,包括源码中的空格,回车等符号也会作为参数
文本域通过右下角可以拖拽改变文本大小,实际项目中,需要通过css样式关闭
style="resize:none;width:200px;height:100px;"
<form action="01.html" method="get">
<input type="text" name="un"><br>
<input type="submint" value="input按钮"><br>
<button>button按<br>钮1</button>
<button type="reset">button按钮2</button2>
<button type="button">button按钮2</button2>
</form>
< button>可以通过设定type属性的不同属性值,实现按钮效果
- type:submit 提交按钮
- reset 重置按钮
- button 普通按钮
< button>标签与< input>标签的优点
显示文字为标签的内容,可以更方便设定各种样式
button按钮功能更加强大
与JavaScript配合更加方便
实际项目中推荐使用button
<form action="01.html" method="get">
<select name="city">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">重庆</option>
<option value="4">天津</option>
</select>
</form>
< select>标签需要与< option>标签配合使用
传参的键名定义在< select>标签中的name属性值
实际项目中,< option>标签需要添加value属性,属性值为从0开始的整数,
作为< option>标签传递的参数,为了数据库的安全性
< select>属性:
size:设定下拉列表框显示数据数量,显示方式从下拉列表变为滚动条
multiple:多选属性,布尔属性
< option>属性:
selected:默认选中,布尔值
下拉列表标签分组
<form action="01.html" method="get">
<select name="city">
<optgroup label="城市">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">重庆</option>
<option value="4">天津</option>
<optgroup>
<optgroup label="城市2">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">重庆</option>
<option value="4">天津</option>
<optgroup>
</select>
</form>
< optgroup>包裹需要分组的< option>标签
< optgroup>标签可以添加label属性,设定分组名称
有序列表
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
< ol>标签必须和< li>标签配合使用
< li>标签必须被< ol>标签嵌套
所有的内容都必须写在一个或多个< li>标签中
属性:
- type:设定样式标记
- 1,阿拉伯数字样式
- a,小写英文字母样式
- A,大写英文字母样式
- i,小写罗马数字样式
- I,大写罗马数字样式
- start:标记起始值设定
- 1,只接受整数形式的内容
- 2,浮点数只接受整数部分
- 3,可以是负数
- reversed:倒序显示
- 布尔属性,不写属性值 IE浏览器不支持此属性
无序列表
<ul>
<li>无序列表一</li>
<li>无序列表二</li>
<li>无序列表三</li>
<li>无序列表四</li>
</ul>
< ul>标签必须和< li>标签配合使用
< li>标签必须被< ul>标签嵌套
所有的内容都必须写在一个或多个< li>标签中
属性:
type:设定样式标记
- disc,实心圆
- circle,空心圆
- square,实心方块
自定义列表
<dl>
<dt>北京</dt>
<dd>上海</dd>
</dl>
< dl>标签需配合< dt>标签或者< dd>标签使用
< dd>标签比< dl>标签缩进显示