layui学习笔记3--表单

表单

  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>开始使用Layuititle>  
  <meta name="renderer" content="webkit">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  <link rel="stylesheet" href="E:/layui/layui/css/layui.css">  
head>  
<body>  
    <form class="layui-form layui-form-pane" action="">  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">图标label>  
            <div class="layui-input-block">  
                <i class="layui-icon">i>   
                <i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">i>    
            div>  
        div>  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">按钮label>  
            <div class="layui-input-block">  
                 <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮button>  
                 <button class="layui-btn layui-btn-radius">默认按钮button>  
                 <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮button>  
            div>  
        div>  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">按钮label>  
            <div class="layui-input-block">  
                 <button class="layui-btn">  
                    <i class="layui-icon">i> 添加  
                 button>  
                 <button class="layui-btn">  
                    <i class="layui-icon">i>   
                 button>  
                 <div class="layui-btn-group">  
                    <button class="layui-btn layui-btn-small">  
                        <i class="layui-icon">i>  
                    button>  
                    <button class="layui-btn layui-btn-small">  
                        <i class="layui-icon">i>  
                    button>  
                    <button class="layui-btn layui-btn-small">  
                        <i class="layui-icon">i>  
                    button>  
                    <button class="layui-btn layui-btn-small">  
                     <i class="layui-icon">i>  
                    button>  
                div>  
            div>  
        div>  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">单选框label>  
            <div class="layui-input-block">  
                <input type="radio" name="sex" value="nan" title="男"> <input  
                    type="radio" name="sex" value="nv" title="女" checked> <input  
                    type="radio" name="sex" value="" title="中性" disabled>  
            div>  
        div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">开关label>  
            <div class="layui-input-block">  
                <input type="checkbox" name="switch" lay-skin="switch">  
            div>  
        div>  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">复选框label>  
            <div class="layui-input-block">  
                <input type="checkbox" name="" title="写作"  checked>  
                <input type="checkbox" name="" title="发呆" lay-skin="primary">  
                <input type="checkbox" name="" title="禁用" lay-skin="primary"  
                    disabled>  
            div>  
        div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">输入框label>  
            <div class="layui-input-block">  
                <input class="layui-input" type="text" required lay-verify="required" placeholder="请输入标题">  
            div>  
        div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">密码框label>  
            <div class="layui-input-inline">  
                <input class="layui-input" type="password" placeholder="请输入密码">  
            div>  
            <div class="layui-form-mid layui-word-aux">辅助文字div>  
        div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">选择框label>  
            <div class="layui-input-block">  
                <select name="city" lay-verify="required">  
                    <option value="">option>  
                    <option value="1">石家庄option>  
                    <option value="2">北京option>  
                    <option value="3">上海option>  
                    <option value="4">广州option>  
                    <option value="5">西安option>  
                select>  
            div>  
        div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">文本域label>  
            <div class="layui-input-block">  
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea">textarea>  
            div>  
        div>  
        <div class="layui-form-item">  
            <div class="layui-input-block">  
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交button>  
                <button type="reset" class="layui-btn layui-btn-primary">重置button>  
            div>  
        div>  
    form>  


    <script src="E:/layui/layui/layui.js">script>  
<script>   
//一般直接写在一个js文件中  
layui.use(['layer', 'form'], function(){  
  var layer = layui.layer  
  ,form = layui.form();  

  //监听提交  
  form.on('submit(formDemo)', function(data){  
    layer.msg(JSON.stringify(data.field));  
    return false;  
  });  
});  
script>   

body>  
html>  

你可能感兴趣的:(layui)