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. 关于.NET字符串驻留的问题

    默认情况下,CLR会把字符串常量保存在字符串池中..NET 2.0引入了CompilationRelaxations.NoStringInterning枚举成员.这个枚举CompilationRela ...

  2. [Hive_4] Hive 插入数据

    0. 说明 Hive 插入数据的方法 && Hive 插入数据的顺序 && 插入复杂数据的方法 && load 命令详解 1. Hive 插入数据的方法 ...

  3. 十大经典排序算法的python实现

    十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此称为非线性时间比较类排序.包括:冒泡排序.选择排序.归并排序.快速 ...

  4. 【算法】LeetCode算法题-Roman To Integer

    这是悦乐书的第145次更新,第147篇原创 今天这道题和罗马数字有关,罗马数字也是可以表示整数的,如"I"表示数字1,"IV"表示数字4,下面这道题目就和罗马数 ...

  5. 网络协议与OSI体系结构

    网络协议与网络体系结构 一.网络协议的概念 1.含义: 网络协议是计算机间进行通信时遵循的一些约定和规则 2.三要素: (1)语法:用于确定协议元素的格式,即数据与控制信息的结构 (2)语义:用于确定 ...

  6. 第一次使用Open Live Writer维护BlogJava

    换了电脑,又重装了一堆东西,现在才把Open Live Writer整好.顺便记下几个心得: Open Live Writer已经没办法从网站上下载了,介绍个方法,可以把地址直接拷贝到迅雷里面,然后请 ...

  7. 04.Python网络爬虫之requests模块（1）

    引入 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用. 警告:非专业使用其他 HTTP 库会导致危险的副作用,包括:安全缺陷症.冗余代码症.重新发明轮子症.啃文档 ...

  8. JavaScrip 入门第一课

    一.代码引入的三种方式 1.直接在head中书写 在head标签里面可以写,在body标签里面也可以写,放到head标签里面和放到body标签里面到底有什么区别,我们后续在讲~ <head> ...

  9. 部署tinyproxy代理服务

    #安装依赖 yum install asciidoc #下载 wget https://github.com/tinyproxy/tinyproxy/releases/download/1.8.4/t ...

  10. P1140 相似基因 这个和之前有一个题目特别像 dp

    题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了444种核苷酸,简记作A,C,G,TA,C,G,TA,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类 ...