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. linux ubuntu 关于vim得一些基本命令

    1.vim显示行号 :set number 2. 快捷键 J 向下 K 往上 H 向左 L 向右 ctrl+shift+T 打开新窗口 ctrl+Page Down 所有vim窗口向下切换 ctrl+ ...

  2. IE和其他浏览器内核

    1.qq急速 2.qq的IE兼容模式 3.Edge 4.IE11 5.chrome js获取浏览器内核 <script language="JavaScript" type= ...

  3. cookie保存登录的用户名和密码

    用cookie保存登录的用户名和密码,当用户访问网站的时候,获取cookie的用户名和密码,通过用 用cookie保存登录的用户名和密码,当用户访问网站的时候,获取cookie的用户名和密码,通过用户 ...

  4. Loj #3057. 「HNOI2019」校园旅行

    Loj #3057. 「HNOI2019」校园旅行 某学校的每个建筑都有一个独特的编号.一天你在校园里无聊,决定在校园内随意地漫步. 你已经在校园里呆过一段时间,对校园内每个建筑的编号非常熟悉,于是你 ...

  5. Linux crm 运行

    crm 项目部署 运行 crm 准备代码 django_crm.zip 上传windows中的代码到linux中,可选 lrzsz(只能传单个的文件)或者xftp 使用lrzsz传输,必须压缩代码包 ...

  6. C#进阶のMEF注入

    1.什么是MEF 先来看msdn上面的解释:MEF(Managed Extensibility Framework)是一个用于创建可扩展的轻型应用程序的库. 应用程序开发人员可利用该库发现并使用扩展, ...

  7. Java 8 新特性:1-函数式接口

    (原) Java 8 新特性1-函数式接口 Lambda表达式基本结构: (param1,param2,param3) -> {代码块} Lambda表达式结构: (type1 arg1,typ ...

  8. centos7+nginx负载均衡Tomcat服务

    接着上一篇:www.cnblogs.com/lkun/p/8252815.html 我们在上一篇在一台centos7服务器上部署了两个nginx,接下来我们使用一个nginx实现tomcat的负载均衡 ...

  9. dubbo远程方法调用的基本原理

    1 dubbo是远程服务调用rpc框架 2 dubbo缺省协议采用单一长连接和NIO通讯 1client端生成一个唯一的id,封装方法调用信息obj(接口名,方法名,参数,处理结果的回调对象),在全局 ...

  10. java发送163邮件

    在服务挂掉后,可以采用发送邮件的方式来通知开发人员进行异常处理 import java.io.IOException; import java.util.Properties; import java ...