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. 从零开始的cve分析- cve-2016-0095 简易记录

    0x00 前言 看k0shl大佬的SSCTF pwn450 Windows Kernel Exploitation Writeup一文,试着写一个x64下的poc. poc地址:https://git ...

  2. Windows 快捷方式（*.link）打开方式关联错误

    1.Win+r 组合键打开 “运行”,输入 “regedit” 打开 注册表 2.依次打开注册表,定位到以下位置: HKEY_CURRENT_USER\SOFTWARE\MICROSOFT\WINDO ...

  3. adb 的常见问题与处理办法两三

    问题1:无法安装手机驱动, 解决方法:安装强大的豌豆荚,通常能都能解决问题 问题2: adb devices 时出现 adb devicesadb server is out of date.  ki ...

  4. Visio画图--我的形状

    本人用的Visio 2013 打开Visio后新建一个拓扑图,发现左侧形状一栏不见了 形状栏可以保存很多自定义图形,怎么才能将形状一栏重新显示出来呢?方法其实很简单,方法如下所示: 这时候我们就会发现 ...

  5. Mysql 关键字的优先级 分组 多表联查

    查看模式 select @@global.sql_mode; 关键字的优先级 from 来自 where 条件 group by 分组 having 筛选 select 查询 distinct 去重 ...

  6. 数据库 schema含义

    数据库Schema有两种含义,一种是概念上的Schema,指的是一组DDL语句集,该语句集完整地描述了数据库的结构.还有一种是物理上的Schema,指的是数据库中的一个名字空间,它包含一组表.视图和存 ...

  7. 【vue】vue +element 搭建项目，this.$nextTick用法

    相关资料:https://www.cnblogs.com/leaf930814/p/7247478.html https://www.cnblogs.com/duanyue/p/7458340.htm ...

  8. 深度学习框架PyTorch一书的学习-第三章-Tensor和autograd-2-autograd

    参考https://github.com/chenyuntc/pytorch-book/tree/v1.0 希望大家直接到上面的网址去查看代码,下面是本人的笔记 torch.autograd就是为了方 ...

  9. Ubuntu 14.04 安装配置备忘录

    完全在 Linux 下工作,大概有3年时间了. 之前都是用 Windows, 而把 Linux 装在虚拟机里,现在反过来,把 Windows 装在了虚拟机里,只是因为偶尔还要用网银的缘故. 以我这几年 ...

  10. Spring Security（二十二）：6.4 Method Security

    From version 2.0 onwards Spring Security has improved support substantially for adding security to y ...