首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

标签左对齐、提交按钮居中的2列HTML表单

可以通过以下方式实现:

HTML结构:

代码语言:txt
复制
<form>
  <div class="form-row">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-row">
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-row">
    <label for="message">留言:</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <div class="form-row">
    <button type="submit">提交</button>
  </div>
</form>

CSS样式:

代码语言:txt
复制
form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label {
  width: 100px;
  text-align: right;
  margin-right: 10px;
}

input, textarea {
  flex: 1;
}

button {
  margin-left: auto;
}

这个HTML表单使用了flex布局来实现标签左对齐和提交按钮居中的效果。form元素设置为flex容器,通过justify-content: center;将内容水平居中对齐。每个表单行(.form-row)使用flex布局,通过align-items: center;将标签和输入框垂直居中对齐。标签(label)设置固定宽度,通过text-align: right;将文本右对齐。输入框(input)和文本域(textarea)使用flex: 1;将剩余空间均分。提交按钮(button)使用margin-left: auto;将其右边的空间撑满,实现居中对齐。

这种表单适用于各种场景,例如用户注册、留言反馈、调查问卷等。腾讯云提供了丰富的云计算产品,其中与表单相关的产品包括:

  1. 腾讯云CVM(云服务器):提供可扩展的计算能力,适用于部署网站和应用程序。产品介绍链接
  2. 腾讯云COS(对象存储):提供安全可靠的云端存储服务,适用于存储表单提交的文件和数据。产品介绍链接
  3. 腾讯云SCF(云函数):无服务器计算服务,可用于处理表单提交的数据并触发相应的业务逻辑。产品介绍链接

以上是腾讯云的一些相关产品,供您参考。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • java学习与应用(4.1)--HTML、CSS

    文件标签html、head、title、body。html5使用<!DOCTYPE html>表示html文档,meta的charset指定字符集。注释 文本标签h1--h6(标题标签),p(段落),br(普通回车解析为空字符),hr(水平线,color颜色,width宽度,size高度,alien对其方式[center left right]),b(加粗),i(斜体),font(字体,color颜色、size大小、face字体) 标签属性中,color颜色表示:可以用red等,建议#值1值2值3(红绿蓝)(取色器)。width表示:数值(px),百分号(占比,相对父元素)。center标签,居中。 特殊字符,对应的字符编码表。手册-->符号。 图片标签img 自闭合(src路径[相对路径即可],alien[部分不支持],alt加载失败显示,width宽,height高)。 列表标签:有序ol(order list,属性type更换样式,start起始位置)、li(每一项)。无序列表ul(unorder list,type),li(每一项)。 链接标签:a标签(属性href跳转URL[本地或网络](mailto:xxx@qq.com选项启动本地邮件),target属性_self本页面打开_blank新建选项卡) 块标签:span(包裹作用,默认无效果,默认不换行一行),div标签,自动换行。 语义化标签:header,footer,用来提高程序可读性,结合css使用。(html5)。 表格:只有行的概念。table定义表格(border线宽,width宽度,cellpadding边沿内容间空白,cellspacing单元格间空白,bgcolor背景色,alien对齐),tr定义行(颜色,对其方式),td定义行内单元格(rowspan行合并,colspan列合并,以第一个行单元格写入),th定义表头单元格。 caption表格标题。thead,tbody,tfoot(类似语义化标签,有位置定义作用,非html5)。

    02

    网页设计基础知识汇总——超链接

    —— 设置边框的宽度,以像素点为单位的边框宽度,不设置宽度默认值为0

    03
    领券