表单就是网页上可以提供用户输入和选择的一些控件。
1、from标签
所有的表单元素需要写在from标签内部&＃xff0c;不是一个结构性的标签&＃xff0c;而是一个功能性标签。
功能:规定我们提交的数据发送到哪里&＃xff0c;发送的方法是那种。
method:方法&＃xff0c;提交数据的方法&＃xff0c;属性值:get&＃xff0c;post
action:提交的位置
2、文本框
允许用户输入文本。
input:输入。
有一个属性:type&＃xff0c;根据属性值不同&＃xff0c;input标签代表的是不同的表单元素。
文本框input标签type属性值为:text
value属性值是未输入之前默认的文本内容。
代码↓
<form><p>文本框: <input type&＃61;"text" value&＃61;"默认文本" />p>
form>
效果图↓
3、密码框
也需要用input标签&＃xff0c;但是type属性值变为password
代码↓
<form><p>密码框:<input type&＃61;"password" />p>
form>
效果图↓
4、按钮
按钮有三种:普通、提交、重置。
普通type:button
提交type:submit
重置type:reset
代码↓
<form><p><input type&＃61;"button" value&＃61;"普通按钮" /><input type&＃61;"reset" value&＃61;"重置按钮" /><input type&＃61;"submit" value&＃61;"提交按钮" />p>
form>
效果图↓
点击提交&＃xff0c;文本框、密码框提交数据&＃xff0c;恢复默认状态。
点击重置&＃xff0c;文本框、密码框直接恢复默认状态。
5、单选框
type:radio收音机的意思&＃xff0c;同一组单选框只能选择一个。
代码↓
<form><p>性别:<input type&＃61;"radio"/>男<input type&＃61;"radio"/>女<input type&＃61;"radio"/>保密p>
form>
效果图↓
发现三个选项都能选中&＃xff0c;因为没给同一组的单选框添加name属性。
添加后代码↓
<form><p>性别:<input type&＃61;"radio" name&＃61;"sex" />男<input type&＃61;"radio" name&＃61;"sex" />女<input type&＃61;"radio" name&＃61;"sex" />保密p>
form>
注意:name属性值必须一致。
6、多选框
type:checkbox&＃xff0c;可以在同一组内进行多选
代码↓
<form><p>兴趣爱好:<input type&＃61;"checkbox" name&＃61;"hobby" />唱歌<input type&＃61;"checkbox" name&＃61;"hobby" />跳舞<input type&＃61;"checkbox" name&＃61;"hobby" />篮球<input type&＃61;"checkbox" name&＃61;"hobby" />足球<input type&＃61;"checkbox" name&＃61;"hobby" />写代码p>
form>
效果图↓
7、文本域
标签:textarea&＃xff0c;可以输入多行文本。
两个上属性值&＃xff0c;规定显示多少行多少列文字。
rows:属性值是数字&＃xff0c;数字表示写多少行。
cols:属性值是数字&＃xff0c;表示一行有多少个字节。
代码↓
<form><p>个人简介:<textarea cols&＃61;"30" rows&＃61;"10">默认的文本textarea>p>
form>
默认值cols&＃61;30&＃xff0c;30个字节15汉字。
默认值rows&＃61;10&＃xff0c;默认10行&＃xff0c;超过10行出现滚动条。
效果图↓
8、下拉菜单
是一组标签&＃xff0c;必须同时出现&＃xff0c;有嵌套关系。
select:选择
option:选项
嵌套关系:select>option
代码↓
<form><p>所在城市<select><option>北京option><option>上海option><option>广州option><option>深圳option><option>杭州option>select>p>
form>
效果图↓
实际中下拉菜单一般用_ul无序列表写。
整体代码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns&＃61;"http://www.w3.org/1999/xhtml" xml:lang&＃61;"en">
<head><meta http-equiv&＃61;"Content-Type" content&＃61;"text/html;charset&＃61;UTF-8"><title>Documenttitle>
head>
<body><form><p>文本框: <input type&＃61;"text" value&＃61;"默认文本" />p><p>密码框: <input type&＃61;"password" />p><p>性别:<input type&＃61;"radio" name&＃61;"sex" />男<input type&＃61;"radio" name&＃61;"sex" />女<input type&＃61;"radio" name&＃61;"sex" />保密p><p>所在城市<select><option>北京option><option>上海option><option>广州option><option>深圳option><option>杭州option>select>p><p>兴趣爱好:<input type&＃61;"checkbox" name&＃61;"hobby" />唱歌<input type&＃61;"checkbox" name&＃61;"hobby" />跳舞<input type&＃61;"checkbox" name&＃61;"hobby" />篮球<input type&＃61;"checkbox" name&＃61;"hobby" />足球<input type&＃61;"checkbox" name&＃61;"hobby" />写代码p><p>个人简介:<textarea cols&＃61;"30" rows&＃61;"10">默认的文本textarea>p><p><input type&＃61;"button" value&＃61;"普通按钮" /><input type&＃61;"reset" value&＃61;"重置按钮" /><input type&＃61;"submit" value&＃61;"提交按钮" />p>form>
body>
html>
效果图↓
![前端库Bootstrap框架：「11]使用 span 创建行内元素](https://img6.php1.cn/3cdc5/9921/243/17a6062cb49e163c.png)
京公网安备 11010802041100号