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

如何在没有fieldset的情况下创建一个formtastic嵌套输入?

在没有fieldset的情况下创建一个formtastic嵌套输入,可以使用Formtastic的inputs方法来实现。以下是一个示例:

代码语言:ruby
复制
<%= semantic_form_for @post do |f| %>
  <%= f.inputs do %>
    <%= f.input :title %>
    <%= f.input :body %>
    <%= f.input :author do %>
      <%= f.input :name %>
      <%= f.input :email %>
    <% end %>
  <% end %>
  <%= f.actions do %>
    <%= f.action :submit %>
  <% end %>
<% end %>

在这个示例中,我们使用inputs方法来创建一个嵌套输入。titlebody是顶层输入,而author是一个嵌套输入,其中包含nameemail两个输入。

这个示例中没有使用fieldset,因为Formtastic会自动为每个嵌套输入创建一个fieldset。如果你需要更多的自定义选项,可以使用input_field方法来创建自定义输入。

代码语言:ruby
复制
<%= semantic_form_for @post do |f| %>
  <%= f.input_field :title %>
  <%= f.input_field :body %>
  <%= f.input_field :author do %>
    <%= f.input_field :name %>
    <%= f.input_field :email %>
  <% end %>
  <%= f.actions do %>
    <%= f.action :submit %>
  <% end %>
<% end %>

这个示例中,我们使用input_field方法来创建输入,而不是input方法。这样可以更好地控制输入的样式和布局。

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

相关·内容

Form 表单 问题多多(上)

本篇博文当中主要内容 form标签必不可少 form标签嵌套规则 关于fieldset以及legend标签 在form标签中基本属性 form标签必不可少 标签用于为用户输入创建 HTML...表单作用在于能够向服务器端传送所需要数据。由于涉及数据提交,form标签自然必不可少啦。 form嵌套规则 在嵌套规则当中,推荐form元素不直接包含行元素。...首先,编写WML页面的时候要考虑到设备屏幕很小。如果试图想把一个form在一个屏幕里面显示,就要指定那些标签保持在一个屏幕中。那么fieldset标签将这些标签捆绑在一个屏幕上。...解决方法是在CSS中将fieldsetborder设置为0,legenddisplay设置为none就可以了。通常情况下我们会使用CSS“重置”。...最后要说是,当时JavaScript还不足够强大时候,很多功能是需要依附于fieldset标签来实现,而今JavaScript雄狮般崛起,fieldset功能完全可以通过JavaScript

1.7K100

框架究竟解决了啥问题?我们可以脱离它们吗?

另外你还要考虑是不是在没有修改代码情况下,升级了一个框架版本就引入一些新 bug。 确实,这样问题也存在于浏览器中,但是浏览器一旦有问题,每个人都跑不了。...在没有框架情况下进行探索,似乎一个不可避免结果就是实现一个自己框架来进行响应式数据绑定。...下面我将尝试整理一些关于如何在不借助框架情况下,使用原生 Web API 解决这些问题指南。 使用 DOM 树响应式 我们回到前面提到错误标签示例。...这不仅包括 Input ,还包括其他表单元素, output、textarea 和 fieldset,它们允许嵌套访问树中元素。 在前面的错误标签示例中,我们展示了如何响应式地显示和隐藏错误消息。...main 表单,其中包含所有全局输入和按钮,还有一个用于创建新任务新表单。

7.9K30
  • Web 框架替代方案

    变化传播经过优化和良好测试,在本地浏览器代码中,避免了不必要昂贵 DOM 操作,追加和删除。 选择器是稳定。在这种情况下,你可以指望标签元素存在。...这不仅包括 input 元素,还包括其他表单元素, output、textarea 和 fieldset,这允许在一个树中对元素进行嵌套访问。...在这种情况下,我们正在创建一个双向流,它有一个特殊目的:向 UI 报告实际模型变化,并向模型报告意图。 CHACHA 接口通常可以从应用规范中导出,而不需要任何 UI 代码。...main 表单,其中有所有的全局输入和按钮,还有一个表单用于创建一个新任务。...请注意,我们使用 form 属性将元素与表单联系起来,以避免表单中元素嵌套。 template 元素代表一个列表项,它根元素是另一个表单,代表与特定任务相关互动数据。

    2.6K10

    HTML5标签2

    中只能嵌套 2. 标签,他就像一个容器,可以容纳所有的元素 表格属性 ?...表格中没有列元素,列个数取决于行单元格个数。 表格不要纠结于外观,那是CSS 作用。 表格学习要求: 能手写表格结构,并且能合并单元格。...表单控件: 包含了具体表单功能项,单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息: 一个表单中通常还需要包含一些说明性文字,提示用户进行填写和操作。...通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下: 文本内容 ?...表单域 在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息收集和传递,form中所有内容都会被提交给服务器。

    2.5K40

    如何使用CSS伪类选择器

    :checked:匹配已勾选复选框或单选按钮 :blank:选择用户输入为空输入框 :enabled:匹配一个被启用输入框。...如果一个元素能够被激活(选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用 :disabled:匹配一个被禁用输入框。...所谓必填,就是在提交所属表单之前,用户必须为输入框指定一个值 :valid:匹配一个内容验证正确输入框 :invalid:匹配一个内容未通过验证输入框 :playing:指向一个正在播放audio...然而,:where()零优先级对CSS重置来说是很实用,它在没有特定样式情况下应用标准样式基线。通常情况下,重置会应用一个默认字体、颜色、内边距和外边距。...例如,当任何必填内部字段没有校验通过时,你可以设置外部表单和下面的提交按钮样式。

    2.2K40

    HTML 5.2 简介

    W3C于2017年12月14日发布了Html规范5.2更新版本,并官方建议用户使用,以下是亲测有效例子,但是本文没有全部归纳总结,因为还有一些小编也没有搞明白,以后一一验证了再续吧。...p> 在默认情况下对话框是隐藏 ?...main {display:block;} 有的时候,为了支持一些较低版本 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。...这意味着样式定义可以离它们被使用地方更近。 ? 虽然这样写起来方便了,但由于性能问题,样式还是优先考虑放在区,规范: 样式元素最好用于文档 head 中。...当我们想用 fieldset 对表单中不同部分进行分组时,这个特性非常有用。在这种情况下使用标题元素是有意义,因为这能让那些依赖于文档大纲用户可以轻松导航至表单对应部分。

    70720

    Vue如何在考试中搞出高质量成绩

    Vue如何在考试中搞出高质量成绩 一、 前言 提示:注意给分项目,不给分地方写不写都无所谓,分高一定要拿下。...四、 代码示例 提示:敏捷开发、测试驱动开发、极限编程、结构化软件开发、持续集成和持续交付 项目层级: login.html效果: 登陆失败弹出效果。...//如果indexO返回-1代表没有 //返回非-1代表本字符串内有查询字符,显示即可。...得分标准: 编号 内容 分数 1 项目层级标准创建js文件夹下放置vue.min.js,外部login.html文件以及index.html文件。 5分 2 login页面效果代码。...25分 6 添加input标签用作模糊查询输入元素模块,并在Vue中data内绑定数据。 5分 7 添加computed属性(5分),完成模糊查询操作。

    60510

    HTML 5.2中有些什么新变化?

    默认情况下,除非应用了打开属性,否则该对话框将从视图(并从DOM访问)中隐藏。...根据规范, 样式元素应该最好用在文档头部。 在文档主体中使用样式可能导致重新设置,触发布局和/或导致重新绘制,因此应该小心使用。 还应该注意是,示例所示,样式不在作用域内。...在这种情况下,使用标题是非常有意义,这使得依赖于文档大纲用户可以更轻松地导航这些表单部分。...没有内联,浮动或 块级子元素 在HTML 5.2中, 元素唯一有效子元素应该是短语内容。...这意味着以下类型元素不应该嵌套一个段落中: 内联块 内联表 浮动和定位块 没有了严格文件类型 最后,我们可以告别以下严格文件类型: <!

    1K10

    HTML 基础

    元素之间可以相互嵌套,形成更为复杂页面结构 ,须要注意: (1). 嵌套顺序 (2). 必须完整嵌套 (3)....-- 注释 --> 注释,要编写在源文档中,但不想被浏览器解释运行内容 (1). 注释不能嵌套 (2). 注释不能出现在标记()中,<a <!...(2).width 宽度 (3). height 高度 注意:如果 width 和 height 只设置其中一个属性的话,那么另外一个将等比缩放,尽可能设置图像宽和高,不改变大小情况下,可以按实际情况去设置... List Item 列表项 ,显示在列表中内容,允许在一个列表中出现另一个列表,被嵌套列表必须放在 中 36.... 或 表单控件,与用户进行交互元素 (1). type 根据不同type值,创建不同输入控件, type省略不写或写错了,那么默认都是文本框(text) ①. type

    4.2K10

    关于行、块元素讲解以及HTML5元素分类

    行元素嵌套规则来说,行元素只能包含行元素,不能包含块元素。 注意:如果引入了重置文件,标签默认样式被清除了,所以标签出来样式没有什么差别。...但是要具体做个总结,仍然还不是很明白,接下来小编就给大家整理出了行、块元素区别总结,一起来看看咯~~~ 块元素特点 1) 独占一行,在默认情况下,宽度自动填满父元素宽度; 2) 宽度和高度可以控制;...(表单包含在form标签中) 定义输入域. 定义文本域.(多行) 定义一个控制标签....(input 元素标注) 定义域. 定义域标题. 定义一个选择列表. 定义选择组.... 定义 fieldset 元素标题. 定义选项列表.与input 元素配合使用该元素,来定义 input 可能值.

    2.7K70

    python测试开发django-39.页面布局form_layout

    前言 xadmin详情页面默认是一行展示一个字段,可以使用form_layout对详情页面的布局重新设计。 可以设置必填和非必填字段,也可以设置不显示,不可以编辑字段。...使用form_layout重新布局,修改adminx.py注册表内容 先从xadmin.layout导入需要用到Fieldset,Row form_layout 里面传元组参数 Fieldse是设置一个标题名称...,默认是第一个参数 Row是设置一行显示内容,可以多个参数显示在一行 from xadmin.layout import Main, TabHolder, Tab, Fieldset, Row, Col...(u'', Row('title', 'auth'), # Row 表示将里面的字段作为一行显示 Row('classify'), ), Fieldset(('正文内容'), #Fieldset一个参数表示区块名称...添加默认输入值 也可以给编辑页面设置默认参数,在models里面设置表字段时候,加上参数default=”输入框内默认输入参数” ?

    80330

    html基础

    > 我一个小标题 我一个p段落。... 元素描述了文档标题 元素包含了可见页面内容 元素定义一个大标题 元素定义一个段落 注:在浏览器页面上使用键盘上 F12 按键开启调试模式,就可以看到组成标签...可以嵌套其他行内元素和块元素普通文本 可以设置width,height 宽高 在标签上都可以添加一个align属性,对齐方式: left right center (二)img 图像标签...12.ol 有序列表:可以给type属性:a A 1 i I等,分别设置不同行头序列号 13.li 列表项标记,是ul与ol直接子元素,li标签中可以定义任意元素,也可以使有序和无序列表互相嵌套...内容没有个数限制 块元素,只能嵌套其他行内和文本 span 便于为元素提供样式(用来选中文本) div 块元素 h1~h6 标题标签 根据权重不同,字体大小依次减小、 加粗 ---- 表单:

    2.1K30

    Spring batch教程 之 配置Step「建议收藏」

    在特殊情况下, ItemStream 客户端是一个Step(由 Spring Batch Core 决定), 会为每个 StepExecution 创建一个ExecutionContext,以允许用户存储特定部分执行状态...1.6.1 The FieldSet(字段集) 当在Spring Batch中使用纯文本文件时, 不管是将其作为输入还是输出, 最重要一个类就是 FieldSet。...上面的配置将会从两个输入文件中读取数据,处理回滚以及重启场景。应该注意是,所有 ItemReader 在添加额外输入文件后(本示例),如果重新启动则可能会导致某些潜在问题。...然而,在批处理情况下, 是没有办法知道到底是哪一项引起问题, 在错误发生时整个缓冲区都将被写出。...然而,这些都是相当普通, 还有很多潜在场景可能没有现成实现。本节将通过一个简单例子,来演示如何创建自定义 ItemReader 和 ItemWriter ,并且如何正确地实现和使用。

    3.9K40

    Form表单 问题多多(中)

    HTML5学堂 - 刘国利:在上一篇博文当中,主要讲解了表单嵌套规则与书写习惯。在本篇博文当中,我主要就具体样式实现进行一下讲解,并提一下表单相关浏览器兼容问题。...先来说第一点:有时,用户会点击表单元素(:文本框)对应文字,例如,点击“用户名”三个字,此时,出于对用户体验考虑,可以使“用户名”所对应表单元素直接获得焦点,让这个表单元素处于聚焦状态。...处理样式方面,由于默认表单元素样式在各个浏览器下渲染效果不同,而当前美工也可能会设计出完全不同于默认效果样式,此时作为前端开发我们,就需要考虑定位等各种布局进行表单元素制作,而此时label成为我们一个不错工具...还有一点需要注意是,假设文本框高度是32像素,为文字设置32像素行高,在初始状态下,IE6光标位置并没有在文本框中垂直居中,因此,通常我们会为父级添加padding,而高度只给文字大小(假设文字大小...HTML5学堂 - 独行冰海 - 刘国利:在上一篇博文当中,主要讲解了表单嵌套规则与书写习惯。

    1.5K50

    Thymeleaf模板常用知识点thymeleaf介绍标准表达式语法常用th标签设置属性值Thymeleaf迭代循环

    如果不考虑上下文情况下,两者没有区别;星号语法评估在选定对象上表达,而不是整个上下文 什么是选定对象?.../> 和Thymeleaf一样,这个模板更像一个静态原型,而不是一个Web应用程序模板。...然后输入th:attr属性,以及更改其设置标签属性值能力: <fieldset...创建了相应控制器和消息文件后,处理这个文件结果是: <input type="text" name=...在一个属性值中指定一个赋值可能是非常实用,但是如果你必须一直这样做的话,它不是创建模板最优雅方法。 Thymeleaf与你一致,这就是为什么th:attr在模板中很少使用。

    3K100

    html学习笔记(一)

    PS:图片没有定义宽高时候,图片按照百分之百比例显示,如果只更改图片宽度或者高度,图片等比例缩放 ---- 路径(略) 相对路径 绝对路径 ---- 超链接 <a href="" title...关闭自身页面,打开链接页面) Target=”blank” 打开新页面 (自身页面不关闭,打开一个链接页面) 锚链接 先定义一个锚点:超链接跳转到页面的任何位置。...PS:当有多个单选框是如何设置只能有一个被选中? 只有将name值设置相同时候,才能实现单选效果。...3:方便其他设备解析(屏幕阅读器、盲人阅读器、移动设备)。 4:便于团队开发和维护。 怎么做? 1:尽可能少使用无语义标签div和span。...3:不要使用纯样式标签,:b、font、u等,改用css设置。 4:需要强调文本,可以包含在strong或者em标签中。

    8.4K51

    网页组成

    PS:图片没有定义宽高时候,图片按照百分之百比例显示,如果只更改图片宽度或者高度,图片等比例缩放 ---- 路径(略) 相对路径 绝对路径 ---- 超链接 <a href="" title...关闭自身页面,打开链接页面) Target=”blank” 打开新页面 (自身页面不关闭,打开一个链接页面) 锚链接 先定义一个锚点:超链接跳转到页面的任何位置。...PS:当有多个单选框是如何设置只能有一个被选中? 只有将name值设置相同时候,才能实现单选效果。...3:方便其他设备解析(屏幕阅读器、盲人阅读器、移动设备)。 4:便于团队开发和维护。 怎么做? 1:尽可能少使用无语义标签div和span。...3:不要使用纯样式标签,:b、font、u等,改用css设置。 4:需要强调文本,可以包含在strong或者em标签中。

    5.8K10
    领券