1、定义表单

　　先看一个基础的表单，再讲解一下：

<form class="ui form" method="post" action="">

    <div class="field">

        <input type="text" name="uname" placeholder="input name">

    </div>

    <button class="ui button" type="submit">Submit</button>

</form>

　　

　　semantic中的表单，其实就是在form标签中加一个ui form的class即可

　　下面的使用div将input包含主要是为了好理解，其中的filed的class标识的是表单项的宽度，和grid的column一样，最大值支持sixteen。

　　需要注意的是，如果field不加宽度的话，默认是sixteen，即最大宽度（会根据屏幕自适应）。

　　同样可以将field宽度写在input标签中，是一样的，但是不推荐，这样的话，input的属性就太多了，可读性不高。

2、表单项与label配合使用

　　semantic-ui中很多例子都是表单与label合用，其实没什么可以需要注意的。

<form class="ui form" method="post" action="">

    <div class="field">

        <label for="uname">姓名</label>

        <input type="text" name="uname" placeholder="input name" id="uname">

    </div>

    <button class="ui button" type="submit">Submit</button>

</form>

　　

3、设置宽度

<form class="ui form" method="post" action="">

    <div class="two wide field">

        <label for="uname">姓名</label>

        <input type="text" name="uname" placeholder="input name" id="uname">

    </div>

    <button class="ui button" type="submit">Submit</button>

</form>

　　

4、单选按钮

　　单选按钮注意不是只在input标签中指定type为radio，还有将input标签嵌入一个span或者div标签内，然后外层标签加上ui radio checkbox

<div class="ui form">

    <div class="inline fields">

        <label for="fruit">Select your favorite fruit:</label>

        <div class="field">

            <div class="ui radio checkbox">

                <input type="radio" name="fruit" value='Apple' id="apple">

                <label>Apples</label>

            </div>

        </div>

        <div class="field">

            <div class="ui radio checkbox">

                <input type="radio" name="fruit" value="Orange" id="orange">

                <label>Oranges</label>

            </div>

        </div>

    </div>

</div>

<button class="ui button">提交</button>

</body>

<script>

    $(".ui.button").on("click",()=>{

        let val = $("#apple").is(":checked") ? $("#apple").val() : $("#orange").val();

        alert(val);

    });

</script>

　　

5、复选框

　　复选框和单选框的使用方法差不多，都要讲input标签包含进一个span或者div标签，在外层标签中指定复选框的样式，比如slider形式的和toggle形式的。

<body style="padding:30px">

    <div class="ui form">

        <div class="inline field">

            <div class="ui checkbox">

                <input type="checkbox" id="normal">

                <label for="normal">Checkbox</label>

            </div>

        </div>

        <div class="inline field">

            <div class="ui slider checkbox">

                <input type="checkbox" id="slider">

                <label for="slider">Slider</label>

            </div>

        </div>

        <div class="inline field">

            <div class="ui toggle checkbox">

                <input type="checkbox" id="toggle">

                <label for="toggle">Toggle</label>

            </div>

        </div>

        <button class="ui button">确定</button>

    </div>

</body>

    <script>

        $(document).ready(()=>{

            $(".ui.button").on("click",()=>{

                let normal = $("#normal").is(":checked");

                let slider = $("#slider").is(":checked");

                let toggle = $("#toggle").is(":checked");

                alert(`

                    normal is checked : ${normal}\n

                    slider is checked : ${slider}\n

                    toggle is checked : ${toggle}\n

                    `);

            })

        });

    </script>

　　

6、表单提示框

<div class="ui form success">

    <div class="field">

        <label>E-mail</label>

        <input type="email" placeholder="joe@schmoe.com">

    </div>

    <div class="ui success message hidden">

        <div class="header">Form Completed</div>

        <p>You're all signed up for the newsletter.</p>

    </div>

    <div class="ui error message hidden">

        <div class="header">Form Completed</div>

        <p>You're all signed up for the newsletter.</p>

    </div>

    <div id="success" class="ui primary button">成功</div>

    <div id="failed" class="ui red button">失败</div>

</div>

</body>

<script>

    $(document).ready(function(){

        $("#success").on("click",()=>{

            $(".ui.success.message").toggle();

        });

        $("#failed").on("click",()=>{

            $(".ui.error.message").toggle();

        });

    });

</script>

　　

　　

semantic-ui 表单的更多相关文章

  1. UI表单

    Monk.UI表单美化插件诞生记!   阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 ...

  2. Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)

    自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...

  3. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  4. 我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！

    背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...

  5. SharePoint Online 自定义Modern UI表单

    前言 用过SharePoint Online 版本的朋友们,应该很熟悉SharePoint为我们带来的Modern UI,而这个页面的订制,也跟原来的表单定制方式不同了,而且更加简单了. 而且,试了一 ...

  6. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  7. easy ui 表单提交添加遮罩，避免数据重复提交

    如下图: //点击提交按钮保存数据 $('#btn_submit').click(function () { //增加遮罩层 $.messager.progress({ title: '温馨提示', ...

  8. easy ui 表单ajax和from两种提交数据方法

    说明: ①ajax在表单提交时需要将所有表单的控件的数据一一获取并赋值传到后台 ②form在提交时,只要给控件加name属性,在提交时就可以将表单数据提交到后台,不需要一一获取再进行赋值. ajax ...

  9. 使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat

    [Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model=" ...

  10. easy ui 表单元素input控件后面加说明（红色）

    <%-- 上传图片到图库基本信息且将图片关联到图集 开始--%> <div id="win_AddPicLib" class="easyui-windo ...

随机推荐

  1. VS2017 + QT5 + C++开发环境搭建和计算器Demo测试

     非常有帮助的参考资料: https://blog.csdn.net/gaojixu/article/details/82185694 该参考文献的主要流程: (1)QT下载安装:从官网下载QT,并记 ...

  2. 设计模式のIOC(控制反转)

    一.什么是Ioc IoC(Inverse of Control)的字面意思是控制反转,它包括两个内容: 控制.反转 可以假设这样一个场景:火车运货,不同类型的车厢运送不同类型的货物,板车运送圆木,罐车 ...

  3. Linux之初识磁盘

    磁盘知识体系概括 机械硬盘和固态硬盘 机械磁盘剖开图 磁盘工作的视频动画,主轴转动,机械手读写 模拟磁盘工作视频,点击中间三角播放 磁盘结构详解 磁盘外部结构 组成 主要由三部分组成:盘片.主轴(机械 ...

  4. Ribbon - WeightedResponseTimeRule原理

    根据响应时间计算权重,响应越长,权重越低,权重越低的服务器,被选择的可能性就越低 //定时统计权重serverWeightTimer.schedule(new DynamicServerWeightT ...

  5. tensorflow中的Supervisor

    tf.train.Supervisor()可以帮我们简化一些事情,可以保存模型参数和Summary,它有以下的作用: 1)自动去checkpoint加载数据或初始化数据 ,因此我们就不需要手动初始化或 ...

  6. BZOJ3378:[USACO]MooFest 狂欢节(树状数组)

    Description 每一年,约翰的N(1≤N≤20000)只奶牛参加奶牛狂欢节．这是一个全世界奶牛都参加的大联欢．狂欢节包括很多有趣的活动,比如干草堆叠大赛.跳牛栏大赛,奶牛之间有时还相互扎屁股取 ...

  7. GUNS后台管理框架部署与发布

    一.GUNS介绍 Guns基于SpringBoot,致力于做更简洁的后台管理系统,完美整合springmvc + shiro + mybatis-plus + beetl + flowable!Gun ...

  8. Asp.net Web Api开发Help Page配置和扩展

    为了方面APP开发人员,服务端的接口都应当提供详尽的API说明.但每次有修改,既要维护代码,又要维护文档,一旦开发进度紧张,很容易导致代码与文档不一致. Web API有一个Help Page插件,可 ...

  9. 转://ASM与文件系统之间文件传输

    熟悉数据库运维的程序猿都知道,数据的备份重于一切,随着业务的发展,数据量也会越来越大,有时候备份集会放在文件系统上面,有的备份集会放在asm存储上面,实现文件系统到文件系统之间的文件传输很简单,cp或 ...

  10. 【html】使ifram搭建的项目，新页面跳出框架

    方法一: <a href="<?php echo $baseUrl . '#/study/order';?>" target="_parent" ...