带着问题去看书学习啦~
HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，第5章开始啦，耶(＾－＾)V
习题
5-1 简述表单的作用。
表单主要用来收集客户端提供的相关信息，使网页具有交互的功能，它是用户与网站实现交互的重要手段。
补充 <form>表单标签中的属性和含义：
1
2
5-2 单行文本框和文本域的区别是什么？
- 单行文本框：其 type 属性值为 text，可输入任何类型的文本，内容以单行显示。
语法：<input type="text" name=" " size=" " maxlength=" " value=" ">
name：文本框的名称，用于和页面中其他控件进行区别，命名时不能包含特殊字符，也不能以HTML作为名称。
size：定义文本框在页面中显示的长度，以字符作为单位。
maxlength：定义在文本框中最多可以输入的文字数。
value：定义文本框中的默认值。
- 文本域：可以输入多行，默认字体是等宽字体（通常是Courier）
语法：<textarea name="文本域名称" value="文本域默认值" rows="文本域行数"cols="文本域列数"></textarea>
name：文本域的名称。
rows：文本域的行数。
cols：文本域的列数。
value：文本域的默认值。
5-3 请写出设置一个单选按钮的代码。
<input type="radio" value="单选框的取值" name="单选框名称"checked="checked"/>
- value：设置用户选中该项目后，传送到处理程序中的值
- name：单选框的名称，需要注意的是，一组单选框中，往往其名称相同，这样在传递时才能更好地对某一个选择内容的取值进行判断。
- checked：表示这一单选框默认被选中，在一组单选框中只能有一项单选框被设置为checked。
<input type="radio" name="network">移动
<input type="radio" name="network">联通
5-4 文件域的作用是什么？
定义多行的文本输入控件
其他
接下来就是实践喽，最好是照着书上的练习题做做，我也仅仅是使用了一下本章的标签，吐槽一下，CSS好难调噢~ 比 Android 的 xml 难调多了，这个还是需要长久的练习和耐心，把一些控件调在自己想要的位置以及大小适应，不过它还是很强大的，多多练习熟悉吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo5</title>
<style>
.mr-cont {
width: 500px;
margin: 50px;
}
.top {
height: 160px;
background: #2ab0f7;
}
.top img {width: 500px;height: 160px;}
.top div {height: 140px;background: rgb(235, 242, 249)}
.bom {padding: 40px 40px;}
.bom img{
width: 50px;
height: 50px;
float: left;
}
.bom form {float: left; margin: -30px 50px;}
form p, .btn {margin-top: 20px;}
.btn {width: 220px;height: 35px;
letter-spacing: 3px;background: rgb(42, 176, 247);
border-radius: 5px;border-color: transparent;
font-size: 16px;color: #fff;}
.content{
margin-top: 250px;
}
.cont {
width: 595px;
height: 540px;
margin: 20px auto;
border: 1px solid#ebebeb;
background: url("img/bg.png") no-repeat;
}
</style>
</head>
<body>
<div class="mr-cont">
<div class="top">
<img src="demo5.jpg">
<div class="bom">
<img src="demo5.jpg">
<form action="#"method="get"target="blank">
<p>账号：<input type="text"></p>
<p>密码：<input type="password"></p>
<input class="btn"type="button"value="安全登录">
</form>
</div>
</div>
</div>
<div class="content">
<ul class="bom-content">
<li>品牌：</li>
<li><input type="checkbox">OPPO</li>
<li><input type="checkbox">三星</li>
<li><input type="checkbox">华为</li>
</ul>
<form><!--使用label标签绑定单行文本框，实现单击图片时文本框也能获取焦点-->
<label><img src="user.png" width="20px" height="20px"><input type="text"></label>
<!--密码输入框-->
<label><img src="user.png" width="20px" height="20px"><input type="password"></label>
</form>
<input type="radio" name="network">移动
<input type="radio" name="network">联通
</div>
<div class="cont">
<form>
<textarea cols="80" rows="6" auto focus></textarea>
<input type="button"value="关闭"class="enter">
<input type="button"value="发送">
</form>
</div>
</body>
</html>
demo5
网友评论