表单
服务器/网站用来收集个人用户信息的工具
<form>
<input
type="text"
name="uname"
id="uname"
placeholder="昵称"
maxlength="6"
readonly="readonly" />
</form>
上面的代码是一个简单表单里面只包含了一个文本输入框
- form就是表单标签,通过里面子标签来收集用户的数据信息,将来通过接口提交对应的服务器.如果没有写,默认将数据提交到当前页面.
- form标签的子标签有:
- input元素
- 根据属性type的取值不同,分为
- type取值为 text,就是当前案例中的文本输入框.特点:输入的内容明文显示.
- 其它属性:
- name 属性的取值来自于实际需求中的数据库中对应列名(即使不同,也会有相应的对应关系),只有有name属性的表单元素才会提交数据到服务器
- id 属性 页面元素的唯一标识,通过id的属性值可以找到当前的输入框.
- placeholder属性 提示用户输入的信息
- maxlength 属性限制用户输入的数据的大小,因为表单也不能发送大量数据,用户提交数据过多,会造成服务器的压力太大.
- readonly 设置控件只读,当前的文本输入框不能使用
<input type="password"
name="upwd" id="upwd"
placeholder="密码"
maxlength="6" />
- type取值为password是密码输入框特点是输入内容不明文显示,但是如果是默认提交请求方式会出现密码显示在地址栏,这样是不安全的,所有提交请求的方式不能未使用默认方式.
<style>
#uname,#upwd{
width: 300px;
height: 40px;
border-color: blue;
border-radius: 10px;
background-color: pink;
}
/*伪类 文本输入框被选中的样式*/
#uname:focus{
border-color: red;
}
/*密码输入框的样式*/
#upwd:focus{
border-color: purple;
}
</style>
- 上面是两个输入框的样式文件,使用的是内部样式表.通过id选择器来定义样式,当两个元素要使用同一样式时,可以使用复杂的选择器.
<input type="text" name="qh"
id="qh" list="qhlist" />
<datalist id="qhlist">
<option value="+86"/>
<option value="+852"/>
<option value="+853"/>
<option value="+886"/>
</datalist>
- 上面是文本输入框的取值的另外一种方法,从特定的列表选取值,input元素添加list属性,list属性的取值等于datalist的id属性值,这样input元素就和datalist产生了一个绑定关系.datalist标签是由一组一组的option标签组成 option的意思是选项 datalist的意思是数据列表.datalist是不会在页面显示的
<input type="checkbox" name="xy" id="xy"
value="1" />
<label for="xy">
<span class="zy">
我已阅读并同意相关服务条款和隐私政策
</span>
</label>
- type取值为CheckBox是复选框
- label标签可以通过for属性和复选框的选项的id值绑定产生一种点击label标签的内容等价于选中复选框的图标
<details>
<summary>约定</summary>
<p>
<a href="#">QQ号码规则</a><br />
<a href="#">隐私政策</a><br />
<a href="#">空间政策</a>
</p>
</details>
- details 详情 里面包含summary 主题标签p标签段落标签,展开的详情的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qq</title>
<style>
#uname,#upwd{
width: 300px;
height: 40px;
border-color: blue;
border-radius: 10px;
background-color: pink;
}
#uname:focus{
border-color: red;
}
#upwd:focus{
border-color: purple;
}
/*使用类属性的值去定义样式,定义的
样式可能会匹配到多个标签*/
.qh{
width: 100px;
height: 40px;
border-color: blue;
border-radius: 10px;
background-color: pink;
}
#phone{
width: 186px;
height: 40px;
border-color: blue;
border-radius: 10px;
background-color: pink;
}
#yzm{
width: 186px;
height: 40px;
border-color: blue;
border-radius: 10px;
background-color: blue;
color: white;
}
#zc{
width: 300px;
height: 40px;
border-color: blue;
border-radius: 10px;
background-color: blue;
color: #FFFFFF;
}
.zy{
font-size: 8px;
color: gray;
}
details{
font-size: 8px;
}
</style>
</head>
<body>
<h2>欢迎注册QQ</h2>
<span>每一天,乐在沟通.</span>
      
   
<span>
<a href="#"
style="text-decoration: none;">
免费靓号</a>
</span>
<br />
<br />
<br />
<form>
<input
type="text"
name="uname"
id="uname"
placeholder="昵称"
maxlength="6"
/>
<br />
<br />
<input type="password"
name="upwd" id="upwd"
placeholder="密码"
maxlength="6" />
<br />
<br />
<input type="text" name="qh"
class="qh" list="qhlist" />
<datalist id="qhlist">
<option value="+86"/>
<option value="+852"/>
<option value="+853"/>
<option value="+886"/>
</datalist>
<input type="text" name="phone"
id="phone"
placeholder="电话号码" />
<br />
<br />
<input type="text" name="qh"
class="qh" placeholder="短信验证码" />
<input type="button" name="yzm"
id="yzm"
value="发送验证码" />
<br />
<br />
<input id="zc" type="submit"
value="立即注册" />
<br />
<br />
<input type="checkbox" name="xy" id="xy"
value="1" />
<label for="xy">
<span class="zy">
我已阅读并同意相关服务条款和隐私政策
</span>
</label>
<details>
<summary>约定</summary>
<p>
<a href="#">QQ号码规则</a><br />
<a href="#">隐私政策</a><br />
<a href="#">空间政策</a>
</p>
</details>
</form>
</body>
</html>