第5章通过HTML5表单与用户交互

用户8928967

发布于 2021-08-20 17:03:09

1.2K0

发布于 2021-08-20 17:03:09

文章被收录于专栏：用户8928967的专栏

带着问题去看书学习啦~

HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，第5章开始啦，耶(＾－＾)V

习题

5-1 简述表单的作用。

表单主要用来收集客户端提供的相关信息，使网页具有交互的功能，它是用户与网站实现交互的重要手段。

补充 <form>表单标签中的属性和含义：

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

?关注我吖~❤️

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-08-16，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

css

网站

本文分享自妮K妮K妮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

css

网站

登录后参与评论

0 条评论

热度