Web前端复习：程序设计题

最新推荐文章于 2024-01-07 20:05:49 发布

程序猿小张的日常笔记

最新推荐文章于 2024-01-07 20:05:49 发布

阅读量1.8k

点赞数 15

分类专栏：学习笔记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_52344565/article/details/122335676

版权

学习笔记专栏收录该内容

35 篇文章 4 订阅

订阅专栏

这篇博客探讨了Web前端开发中的表单设计，包括输入类型如文本、数字、日期、邮箱、URL等，以及复选框、单选按钮、下拉菜单等元素的使用。同时，还介绍了JavaScript中的日期对象，通过示例展示了如何获取并显示当前日期。博客内容覆盖了前端基础和JavaScript基础，适合初学者巩固知识。

摘要由CSDN通过智能技术生成

Web前端复习：程序设计题

表单设计

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单设计</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>我的个人信息</legend>
            姓名：<input type="text" name="name" size= "24" required><br/>
            年龄：<input type="number" name="age" maxlength="3"><br/>
            性别：
            <input type="radio" name="radio1" checked> 男 
            <input type="radio" name= "radio1"> 女 </br>
            国籍：
            <select name="national">
                <option value="1" selected>中华人民共和国</option>
                <option value="2">其它</option>
            </select></br>
            入学时间 : <input type="date" /> <br>
            学号：<input type="text" name="xuehao" maxlength="10" pattern="^2020[0-9]{6}" placeholder="格式：2020007172" required><br/>
            邮箱：<input type="email" name="email"></br>
            博客网址：<input type="url" name="url"></br>
            密码：<input type ="password" name ="mima" size="24"></br>
            个人简介：
            <textarea cols="50"   rows="5" wrap="hard"></textarea></br>
            爱好：
            <input type="checkbox" name="checkbox1" >唱歌
            <input type="checkbox" name="checkbox1" >跳舞
        </fieldset>
        <input type="submit" value="提交">
        &nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置">
    </form>
</body>
</html>

日期对象

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Context-Type" content="text/html; charset= UTF-8">
    <title>日期对象</title>
    <script type="text/javascript">
        function Datedemo(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            month = month + 1;
            var day = date.getDate();
            //document.write("当前日期为："+year+"年"+month+"月"+day+"日");
            alert("当前日期为："+year+"年"+month+"月"+day+"日");
        }   
    </script>
  
</head>
<body>
    <button onclick="Datedemo()">点击显示日期</button>
</body>
</html>

最后一门专业课！！！
一切顺利

程序猿小张的日常笔记

关注

15
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
4
评论
Web前端复习：程序设计题

Web前端复习：程序设计题表单设计<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表单设计</title></head><body> <form> <fieldset> <legend>我的个人信息</legend>
复制链接

扫一扫