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. centOS7docker安装oracle

    1.拉取oracle 11g 的镜像: 用root登陆服务器,输入下面的命令,拉取oracle 11g的镜像,有点大,6.8G多: docker pull registry.cn-hangzhou.a ...

  2. [Hive_add_4] Hive 命令行客户端 Beeline 的使用

    0. 说明 Hive 命令行客户端 beeline 的使用,建立在启动  Hadoop 集群和启动 hiveserver2 的基础之上 1. 使用指南 在确保集群启动和 hiveserver2 启动的 ...

  3. Java程序导出成.jar文件、生成.exe可执行文件及打包成可执行安装程序（可在无Java环境的计算机上运行）--以个人所得税计算器为例

    Java程序导出成.jar文件.生成.exe可执行文件及打包成可执行安装程序 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 需要准备的软件: jdk, ...

  4. 词云wordcloud入门示例

    整体简介: 词云图,也叫文字云,是对文本中出现频率较高的“关键词”予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨. 基于Python的词云生成类库 ...

  5. centos7下安装docker（21docker swarm集群创建）

    创建swarm集群: 实验环境:盗图 swarm-manager是manager node,swarm-worker1和swarm-worker2是worker node. 所有节点的docker版本 ...

  6. 【Java8】@FunctionalInterface

    阅读目录 什么是函数式接口(Functional Interface) 函数式接口用途 关于@FunctionalInterface注解 函数式接口里允许定义默认方法 函数式接口里允许定义静态方法 函 ...

  7. iptables 设置端口转发/映射

    iptables 设置端口转发/映射 服务器A有两个网卡 内网ip:192.168.1.3 外网ip:10.138.108.103 本地回环:127.0.0.1 服务器B有网卡,8001提供服务 内网 ...

  8. 004_Python高级特性（1）：Iterators、Generators和itertools（参考）

    对数学家来说,Python这门语言有着很多吸引他们的地方.举几个例子:对于tuple.lists以及sets等容器的支持,使用与传统数学类 似的符号标记方式,还有列表推导式这样与数学中集合推导式和集的 ...

  9. Python脱产8期 Day04 2019/4/16

    流程控制 1.宏观一定是自上而下(逻辑上方代码一定比逻辑下方代码先执行):顺序结构2.遇到需要条件判断选择不同执行路线的执行方式:分支结构3.有些事情需要重复不断的去执行(当满足某种条件或不满足某种条 ...

  10. 【LOJ 2145】「SHOI2017」分手是祝愿

    LOJ 2145 100pts 这题...BT啊 首先我们很容易想出\(dp(msk)\)表示现在灯开关的情况是\(msk\),期望通过多少步走到终结态. 很明显\(dp(msk)=\frac{1}{ ...