打印输入表单中的内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了打印输入表单中的内容相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
</head>

<body>
    <form>
        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </p>
        <p>
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" placeholder="输入一个昵称">
        </p>
        <p>
            <label for="password">密码</label>
            <input type="password" id="password">
        </p>
        <p>
            <label for="passwordchecked">确认密码</label>
            <input type="password" id="passwordchecked">
        </p>
        <p>
            <label for="sex">性别</label>
            <select id="sex">
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
        </p>
        <p>
            <label for="">爱好</label>
            <label>
                <input type="checkbox" name="dx" value="1">旅游</label>
            <label>
                <input type="checkbox" name="dx" value="2">睡觉</label>
            <label>
                <input type="checkbox" name="dx" value="3">上网</label>
                <label>
                <input type="checkbox" name="dx" value="4">看电影</label>
        </p>
        <p>
            <label for="">是否已婚</label>
            <label>
                <input type="radio" value="1" name="married">是</label>
            <label>
                <input type="radio" value="0" name="married">否</label>
        </p>
        <div class="center">
            <input type="hidden" value="注册表单">
            <input type="button" value="返回" />
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
    <div class="msg"></div>
</body>

</html>

 

<script src="../jquery-1.12.0.js"></script>

 

 <script type="text/javascript">
    $(function(){
        // @作业
        // 点击提交按钮时,把输入的内容按顺序放到.msg 
        $(‘form‘).css(‘float‘, ‘left‘);
        $(‘.msg‘).css({float:‘right‘,width:400,height:400,background:‘#89abec‘,padding:20});
        $(‘:submit‘).click(function(e){console.log(111)
            e = e || window.event
             var username = $(‘#username‘).val()
             var nickname = $(‘#nickname‘).val()
             var password = $(‘#password‘).val()
             var sex = $(‘select option:selected‘).text()

             var arr1 = []
             $(‘input[type = "checkbox"]:checked‘).each(function(){
                arr1.push($(this).parent().text())
             })
             var radio = $(‘input[type="radio"]:checked‘).parent().text()


            $(‘.msg‘).html(‘用户名:‘ +username+ ‘<br>昵称:‘ +nickname+ ‘<br>密码:‘ +password+ ‘<br>性别:‘ +sex+ ‘<br>爱好:‘+ arr1+ ‘<br>是否已婚:‘ +radio)  
            
            e.preventDefault()

        })
    })
    </script>

 

打印输入表单中的内容

 

以上是关于打印输入表单中的内容的主要内容,如果未能解决你的问题,请参考以下文章

HTML代码片段

HTML代码片段

textArea打印时,内容不显示

我的Android进阶之旅NDK开发之在C++代码中使用Android Log打印日志,打印出C++的函数耗时以及代码片段耗时详情

webstorm代码片段的创建

jqPrint 无法打印textArea