HTML—表单页面制作

最新推荐文章于 2024-07-04 16:37:43 发布
最新推荐文章于 2024-07-04 16:37:43 发布
阅读量1.1k 收藏 26
点赞数 35
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YWQ13447969/article/details/137954415
版权

大学生HTML练习之表单页面制作，上面是做好呈现出来的成品图。

这里的 <link href="CSS属性.css" type="text/css" rel="stylesheet">是引入css样式，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建一个表单</title>
    <link href="CSS属性.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="content">
    <form action="#" method="post">
        <h3>您的个人信息：</h3>
        <table class="content">
            <tr>
                <td class="left">用户名：</td>
                <td><input type="text" name="wangqiong" maxlength="6" /></td>
            </tr>
            <tr>
                <td class="left">密码：</td>
                <td><input type="password" name="mima" size="20"></td>
            </tr>
            <tr>
                <td class="left">性别：</td>
                <td><input type="radio" name="sex" />男
                    <input type="radio" name="sex" checked="checked">女</td>
            </tr>
            <tr>
                <td class="left">学历：</td>
                <td>
                    <select>
                        <option>-请选择-</option>
                        <option>中职/高中</option>
                        <option>专科/本科</option>
                        <option>硕士研究生</option>
                        <option>博士研究生</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="left">所在城市：</td>
                <td>
                    <select>
                        <option>-请选择-</option>
                        <option selected="selected">西安</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广州</option>
                        <option>深圳</option>
                        <option>杭州</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="left">兴趣爱好：</td>
                <td>
                    <input type="checkbox">旅游
                    <input type="checkbox">阅读
                    <input type="checkbox">运动
                    <input type="checkbox">饮食
                    <input type="checkbox">跳舞
                    <input type="checkbox">穿搭
                    <br>
                    <input type="checkbox">说唱
                    <input type="checkbox">剪辑
                    <input type="checkbox">追剧
                    <input type="checkbox">摄影
                    <input type="checkbox">养生
                    <input type="checkbox">滑板
                </td>
            </tr>
            <tr>
                <td class="left">上传照片：</td>
                <td><input type="file"></td>
            </tr>
            <tr>
                <td class="left">自我介绍：</td>
                <td><textarea cols="60" rows="8">您有任何问题或建议，随时可联系我们！</textarea></td>
            </tr>
            
            <tr>
                <td colspan="30">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="submit" class="btn">
                    <input type="reset" class="btn">
                    <input type="button" value="普通按钮" class="btn">
                </td>
            </tr>    
        </table>
    </form>
</div>
</body>
</html>

CSS样式：

@charset "utf-8";
/* CSS Document */
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    font-family: "微软雅黑";
    background-image:url("images/A1.jpg");
    background-repeat: no-repeat;
    margin: 20px 300px;
    font-size: 20px;
}
#content{
    width:800px;
    height: 700px;
    margin: 0 auto;
    padding: 10px 120px;
    color:#6C6262;
}
h3{
    width: 444px;
    height: 45px;
    font-size: 20px;
    font-weight: 100;
    line-height: 45px;
    border-bottom: 1px solid ;
}
td{
    height: 50px;
}
.left{
    width: 120px;
    text-align: right;
}
input{
    vertical-align: middle;
}
select{
    width: 170px;
    border:1px solid;
}
textarea{
    width: 380px;
    border: 1px solid;
    resize: none;
    font-size: 15px;
    color: #aaa;
    padding: 20px;
}
.btn{
    width: 80px;
    height: 40px;
    background: #FCECEA;
    margin: 10px 40px;
}

图片大家可以根据自己的喜好自行进行添加的哈~

夏天YWQ
关注
  • 35
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用户注册页面表单设计
06-16
用户注册的表单网页，有两次密码输入是否正确的判断，提交窗口的弹出，同页面的重制和提交，多个选项的设置，下拉菜单的设置
html实现打印预览效果
小屁孩大帅-保密的博客
11-29 816
效果如下： 方式一 1、设置div，打印区域，最好是单放在一页，因为需要打印的是该页所有内容 <div id="contractContent" style="width: fit-content"></div> 2、拼接div中需要的文本，可以设置动态数据填充 var contractContent = ''; c...
原生html form 表单提交小案例
m0_56590688的博客
05-22 146
【代码】原生html form 表单提交小案例。
报销单-html
weixin_45939821的博客
07-20 192
【代码】报销单-html。
HTML发票票据,模板
03-29
随便写的HTML模板 HTML发票票据,模板 收款发票 收据
HTML5——history实现单页面
zyz00000000的博客
09-19 2623
1. 单页Web应用（single page web application，SPA） history.back()：URL回退一次 history.forward()：URL前进一次 history.go(n)：URL几次history.back()或几次history.forward()，比如：history.go(2)：两次history.forward()；history.go(-2...
一个html表单页面
Hsiao99的博客
04-17 4482
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <!--表单是html界面收集用户信息，并最后发送给服务器--> <!...
html怎么制作表单,HTML如何制作表单
weixin_34070493的博客
07-02 4875
制作表单的方法：首先使用form标签创建表单，搭建表单框架；然后使用input标签创建文本输入框和提交按钮；接着使用select和option标签创建下拉列表；最后使用textarea标签创建文本区域即可。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。HTML 表单用于收集不同类型的用户输入。表单是一个包含表单元素的区域表单元素是允许用户在表单...
HTML制作表单ppt课件.ppt
11-15
访问一个包含表单的页面，输入数据后，"提交"表单浏览器将用户在表单中输入的数据进行打包，并发送给服务器。服务器接收数据并转由程序处理。 1.4 表单控件标记 表单控件标记是嵌套在标记之内的标记，用于让用户...
HTML-表单标签制作注册页面
07-22
HTML中使用表单标签制作注册页界面，表单标签重要的是使用type属性
html 菱形动态登录页面制作
04-26
HTML菱形动态登录页面制作是一项常见的前端开发任务，它涉及到HTML基础、CSS样式设计以及可能的JavaScript交互。在这个过程中，开发者需要创建一个视觉上吸引人的登录界面，该界面的元素呈菱形状排列，并且可能包含...
html表单制作及实例 + 打卡表单设计
11-12
在本教程中，我们将深入探讨HTML表单的制作及其在实际应用中的实例，特别是如何设计一个打卡表单。 一、HTML表单基本结构 HTML表单由`<form>`标签定义，它包含了用户输入的各种控件，如文本框`<input type="text">`...
HTML5 实战PHP之Web页面表单设计
12-14
在本教程中，将带领大家使用HTML5，CSS3及PHP实际设计一个符合HTML5标准的简单的表单提交网页，读者可以从中学习到HTML5 新的表单页面的基本元素。本文的读者为有一定HTML，CSS及PHP的读者学习 　表单的设计草图 　...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1101
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 898
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1398
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 290
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1294
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
react自定义hooks---useCounter
weixin_73098736的博客
07-02 291
【代码】react自定义hooks---useCounter。
HTML5制作表单注册页面代码
03-22
<!DOCTYPE html> <html> <head> <title>注册页面</title> </head> <body> <h1>注册</h1> <form action="register.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br><br> <input type="submit" value="注册"> </form> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值