代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/images/required/ico/favicon.ico">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/required/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/required/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/required/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/images/required/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/images/required/ico/favicon.png">
<title>Circloid - Responsive HTML Admin Template</title>
<!-- Required CSS Files -->
<link type="text/css" href="assets/css/required/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link type="text/css" href="assets/js/required/jquery-ui-1.11.0.custom/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" href="assets/js/required/jquery-ui-1.11.0.custom/jquery-ui.structure.min.css" rel="stylesheet" />
<link type="text/css" href="assets/js/required/jquery-ui-1.11.0.custom/jquery-ui.theme.min.css" rel="stylesheet" />
<link type="text/css" href="assets/css/required/mCustomScrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<link type="text/css" href="assets/css/required/icheck/all.css" rel="stylesheet" />
<link type="text/css" href="assets/fonts/metrize-icons/styles-metrize-icons.css" rel="stylesheet">
<!-- Optional CSS Files -->
<link type="text/css" href="assets/css/optional/bootstrapValidator.min.css" rel="stylesheet" />
<!-- add CSS files here -->
<!-- More Required CSS Files -->
<link type="text/css" href="assets/css/styles-core.css" rel="stylesheet" />
<link type="text/css" href="assets/css/styles-core-responsive.css" rel="stylesheet" />
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/required/misc/ie10-viewport-bug-workaround.js"></script>
<!--[if IE 7]>
<link type="text/css" href="assets/css/required/misc/style-ie7.css" rel="stylesheet">
<script type="text/javascript" src="assets/fonts/lte-ie7.js"></script>
<![endif]-->
<!--[if IE 8]>
<link type="text/css" href="assets/css/required/misc/style-ie8.css" rel="stylesheet">
<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="assets/css/required/misc/excanvas.min.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<!-- START Header Container -->
<div id="header-container">
<div class="header-bar navbar navbar-inverse" role="navigation"> <!-- NOTE TO READER: Accepts the following class(es) "navbar-fixed-top" class -->
<div class="container">
<div class="navbar-header">
<!-- START logo -->
<div class="logo">
<a href="index.html">
<img class="default-logo" src="assets/images/required/logo-default.png" width="156" height="44" alt="Logo" />
<img class="small-logo" src="assets/images/required/logo-small.png" width="48" height="44" alt="Logo" />
</a>
</div>
<!-- END logo -->
<!-- START Mobile Menu Toggle -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- END Mobile Menu Toggle -->
<!-- START Language Selector -->
<div class="header-language"> <!-- NOTE TO READER: Accepts the following class(es) "animate" class -->
<ul>
<li>
<a href="#" class="language-closed">
<span aria-hidden="true" class="icon icon-wireframe-globe"></span>
<span class="main-text">Language</span>
</a>
<a href="#" class="language-opened">
<span aria-hidden="true" class="icon icon-cross"></span>
<span class="main-text">Language</span>
</a>
<ul>
<li class="language-list-item">
<div class="language-block">
<a href="#">
<span class="language-flag">
<img src="assets/images/optional/flags/united-kingdom.png" width="32" height="32" alt="english-flag" />
</span>
<span class="language-name">
English
</span>
</a>
</div>
</li>
<li class="language-list-item">
<div class="language-block">
<a href="#">
<span class="language-flag">
<img src="assets/images/optional/flags/spain.png" width="32" height="32" alt="espanol-flag" />
</span>
<span class="language-name">
Español
</span>
</a>
</div>
</li>
<li class="language-list-item">
<div class="language-block">
<a href="#">
<span class="language-flag">
<img src="assets/images/optional/flags/germany.png" width="32" height="32" alt="germany-flag" />
</span>
<span class="language-name">
Deutsch
</span>
</a>
</div>
</li>
<li class="language-list-item">
<div class="language-block">
<a href="#">
<span class="language-flag">
<img src="assets/images/optional/flags/china.png" width="32" height="32" alt="china-flag" />
</span>
<span class="language-name">
中文
</span>
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- END Language Selector -->
<!-- START Search Bar -->
<div class="header-search"> <!-- NOTE TO READER: Accepts the following class(es) "animate" class -->
<form role="form" class="icheck-square" method="post" action="pages-search-results.html">
<ul>
<li>
<a href="#" class="search-closed">
<span aria-hidden="true" class="icon icon-search"></span>
<span class="main-text">Search</span>
</a>
<a href="#" class="search-opened">
<span aria-hidden="true" class="icon icon-cross"></span>
<span class="main-text">Search</span>
</a>
<ul>
<li class="simple-search">
<div class="simple-search-inner">
<div class="simple-search-block">
<div class="input-group">
<input type="text" class="form-control" id="input-search" placeholder="Enter Search Terms...">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="main-text">Search</span>
</button>
</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="input-advanced-search"> Use Advanced Search
</label>
</div>
</div>
</div>
</li>
<li class="advanced-search">
<div class="advanced-search-block">
<div class="form-group">
<label for="input-advanced-select">Advanced Option as dropdown list</label>
<select id="input-advanced-select" class="form-control">
<option>Advanced Option 1</option>
<option>Advanced Option 2</option>
<option>Advanced Option 3</option>
<option>Advanced Option 4</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" id="input-advanced-checkbox-1">
Must contain at least one search term
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="input-advanced-radio-set-1" id="input-advanced-radio-1" value="option1" checked>
Must only be in "Themes" category
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="input-advanced-radio-set-1" id="input-advanced-radio-2" value="option2">
Must only be in "Plugins" category
</label>
</div>
</div>
</li>
</ul>
</li>
</ul>
</form>
</div>
<!-- END Search Bar -->
<!-- START Header Info Container -->
<div class="header-info">
<!-- START Header User Profile -->
<div class="header-profile"> <!-- NOTE TO READER: Accepts the following class(es) "animate" class -->
<ul class="header-profile-menu">
<li>
<a href="#" class="top">
<span class="header-profile-menu-icon">
<img class="list-thumbnail" src="assets/images/required/profile/profile-pic-4.jpg" width="39" height="39" alt="profile-pic-4" />
</span>
<span class="main-menu-text">
Ken Adams
<i class="icon icon-arrow-down-bold-round icon-size-small"></i>
</span>
</a>
<ul>
<li>
<a href="pages-profile-admin.html">
<span aria-hidden="true" class="icon icon-user"></span>
<span class="main-text">Profile</span>
</a>
</li>
<li>
<a href="pages-mailbox-inbox.html">
<span aria-hidden="true" class="icon icon-mail"></span>
<span class="main-text">
<span class="badge pull-right">42</span>
Mailbox
</span>
</a>
</li>
<li>
<a href="pages-calendar.html">
<span aria-hidden="true" class="icon icon-star "></span>
<span class="main-text">
Calendar
<span class="badge pull-right">9</span>
</span>
</a>
</li>
<li>
<a href="pages-signin-1.html">
<span aria-hidden="true" class="icon icon-arrow-curve-right"></span>
<span class="main-text">Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- END Header User Profile -->
<!-- START Header Notification Alert -->
<div class="header-notifications"> <!-- NOTE TO READER: Accepts the following class(es) "animate" class -->
<ul class="header-notifications-inner">
<li class="notifications-alert-info notifications-alert notifications-alert-mobile">
<a href="#">
<span aria-hidden="true" class="icon icon-three-points"></span>
</a>
</li>
<li class="notifications-alert-info notifications-alert">
<a href="#">
<span aria-hidden="true" class="icon icon-email-download"></span>
</a>
<span class="badge badge-bordered pull-bottom-right highlight-color-orange">4</span>
<ul>
<li class="notifications-alert-desc">
<p>You have 4 new messages</p>
</li>
<li class="notifications-alert-block">
<ul class="notifications-alert-list">
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-image">
<img class="list-thumbnail" src="assets/images/required/profile/profile-pic-6.jpg" width="40" height="40" alt="profile-pic-6" />
</span>
<span class="notifications-alert-list-header">Samantha Carter</span>
Re: Updated proposal. Approved.
<span class="timestamp">Just now</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-image">
<img class="list-thumbnail" src="assets/images/required/profile/profile-pic-3.jpg" width="40" height="40" alt="profile-pic-3" />
</span>
<span class="notifications-alert-list-header">Daniel Jackson</span>
Meeting minutes attached
<span class="timestamp">2 minutes ago</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-image">
<img class="list-thumbnail" src="assets/images/required/profile/profile-pic-2.jpg" width="40" height="40" alt="profile-pic-2" />
</span>
<span class="notifications-alert-list-header">Sally Skyler</span>
Bug Report #2
<span class="timestamp">2 hours ago</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-image">
<img class="list-thumbnail" src="assets/images/required/profile/profile-pic-5.jpg" width="40" height="40" alt="profile-pic-5" />
</span>
<span class="notifications-alert-list-header">Teal'c Jafar</span>
Interesting Sales Tips
<span class="timestamp">5 hours ago</span>
</span>
</a>
</li>
</ul>
</li>
<li class="notifications-alert-more">
<p>
<a href="#">See all messages<i class="icon icon-arrow-right-bold-round icon-size-small"></i></a>
</p>
</li>
</ul>
</li>
<li class="notifications-alert-info notifications-alert">
<a href="#">
<span aria-hidden="true" class="icon icon-info"></span>
</a>
<span class="badge badge-bordered pull-bottom-right highlight-color-orange">5</span>
<ul>
<li class="notifications-alert-desc">
<p>You have 5 new notifications</p>
</li>
<li class="notifications-alert-block">
<ul class="notifications-alert-list">
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-icon">
<span class="icon icon-settings"></span>
</span>
System upgrade complete
<span class="timestamp">Just now</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-icon">
<span class="icon icon-user-add"></span>
</span>
<span class="main-text">
Bulk user email import
<span class="progress">
<span class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</span>
</span>
</span>
<span class="timestamp">4 minutes ago</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-icon">
<span class="icon icon-info"></span>
</span>
You now have a total of 2500 registered users.
<span class="timestamp">5 minutes ago</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-icon">
<span class="icon icon-sos"></span>
</span>
General maintenance
<span class="progress">
<span class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (success)</span>
</span>
</span>
<span class="timestamp">10 minutes ago</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-icon">
<span class="icon icon-user-add"></span>
</span>
New user registration
<span class="timestamp">30 minutes ago</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-icon">
<span class="icon icon-comments"></span>
</span>
You have a new chat message
<span class="timestamp">1 hour ago</span>
</span>
</a>
</li>
<li class="notifications-alert-list-item">
<a href="#">
<span class="notifications-alert-list-text">
<span class="notifications-alert-list-icon">
<span class="icon icon-pin"></span>
</span>
New location added
<span class="timestamp">Yesterday</span>
</span>
</a>
</li>
</ul>
</li>
<li class="notifications-alert-more">
<p>
<a href="#">See all notifications<i class="icon icon-arrow-right-bold-round icon-size-small"></i></a>
</p>
</li>
</ul>
</li>
</ul>
</div>
<!-- END Header Notification Alert -->
</div>
<!-- END Header Info Container -->
</div>
</div>
</div>
</div>
<!-- END Header Container -->
<div id="body-container">
<div id="left-column" class=""> <!-- NOTE TO READER: Accepts the following class(es) "menu-icon-only", "fixed" class -->
<div id="mainnav">
<ul class="mainnav"> <!-- NOTE TO READER: Accepts the following class(es) "animate" class -->
<li class="menu-item-top">
<a href="index.html" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-grid-big"></span>
</span>
<span class="main-menu-text">Dashboard</span>
</a>
</li>
<li class="menu-item-top">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-dollar"></span>
</span>
<span class="main-menu-text">eCommerce</span>
</a>
<ul>
<li><a href="ecommerce-dashboard-1.html">Dashboard</a></li>
<li><a href="ecommerce-order-list.html">Order List</a></li>
<li><a href="ecommerce-order-view.html">Order View</a></li>
<li><a href="ecommerce-product-list.html">Product List</a></li>
<li><a href="ecommerce-product-edit.html">Product Edit</a></li>
</ul>
</li>
<li class="menu-item-top">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-layers"></span>
</span>
<span class="badge pull-right-corner">3</span>
<span class="main-menu-text">Layouts</span>
</a>
<ul>
<li><a href="menu-left-header-fixed.html">Left Menu (Fixed Header)</a></li>
<li><a href="menu-left-icon-only.html">Left Menu (Icon Only)</a></li>
<li><a href="menu-left-fixed.html">Left Menu (Fixed)</a></li>
<li><a href="menu-left-boxed.html">Boxed Layout</a></li>
<li><a href="menu-horizontal-normal.html">Horizontal Menu (Normal)</a></li>
<li><a href="menu-horizontal-text-only.html">Horizontal Menu (Text Only)</a></li>
<li><a href="menu-horizontal-fixed.html">Horizontal Menu (Fixed + Header)</a></li>
<li><a href="menu-horizontal-boxed.html">Boxed Layout (Horizontal Menu)</a></li>
</ul>
</li>
<li class="menu-item-top">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-star"></span>
</span>
<span class="main-menu-text">UI Kits</span>
</a>
<ul>
<li><a href="ui-blocks.html">Blocks</a></li>
<li><a href="ui-panels-wells.html">Panels & Wells</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-widgets.html">Widgets</a></li>
<li><a href="ui-charts.html">Charts</a></li>
<li><a href="ui-icons.html">Icons</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-tabs-accordions.html">Tabs & Accordions</a></li>
<li><a href="ui-tooltips-popover.html">Tooltips & Popover</a></li>
<li><a href="ui-modal.html">Modal</a></li>
<li><a href="ui-bootstrap-others.html">Other Bootstrap Elements</a></li>
<li><a href="ui-notification-toastr.html">Notifications (Toastr)</a></li>
<li><a href="ui-grid-layout.html">Grid Layout</a></li>
</ul>
</li>
<li class="menu-item-top">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-documents"></span>
</span>
<span class="badge pull-right-corner hidden-collapsed highlight-color-green">7</span>
<span class="main-menu-text">Pages</span>
</a>
<ul>
<li><a href="pages-blank.html">Blank Page</a></li>
<li><a href="pages-basic-text.html">Basic Text Page</a></li>
<li><a href="pages-search-results.html">Search Results</a></li>
<li><a href="pages-mailbox-inbox.html">Mailbox - Inbox</a></li>
<li><a href="pages-profile.html">Profile - Customer</a></li>
<li><a href="pages-profile-admin.html">Profile - Admin</a></li>
<li><a href="pages-signup.html">Sign Up</a></li>
<li><a href="pages-signin-1.html">Sign In - Type 1</a></li>
<li>
<a href="pages-signin-2.html">
<span class="badge pull-right">Fancy Effects</span>
Sign In - Type 2
</a>
</li>
<li><a href="pages-forgot-password.html">Forgot Password</a></li>
<li><a href="pages-404.html">404 Page</a></li>
<li><a href="pages-500.html">500 Page</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-changelog-faqs.html">Changelog/FAQs</a></li>
<li><a href="pages-calendar.html">Calendar</a></li>
<li><a href="pages-task-list.html">Task List</a></li>
<li><a href="pages-timeline.html">Timeline</a></li>
<li><a href="pages-pricelist.html">Price List</a></li>
</ul>
</li>
<li class="menu-item-top selected">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-settings"></span>
</span>
<span class="main-menu-text">Forms</span>
</a>
<ul>
<li><a href="form-elements.html">Form Elements</a></li>
<li>
<a href="form-extras.html">
<span class="badge pull-right">Goodies</span>
Form Extras
</a>
</li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-file-upload.html">Form Upload</a></li>
<li><a href="form-image-cropping.html">Image Cropping</a></li>
</ul>
</li>
<li class="menu-item-top">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-grids"></span>
</span>
<span class="main-menu-text">Tables</span>
</a>
<ul>
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-datatables.html">Data Tables</a></li>
</ul>
</li>
<li class="menu-item-top">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-block-menu"></span>
</span>
<span class="main-menu-text">Menu Levels</span>
</a>
<ul>
<li>
<a href="#">Menu Level 1.1</a>
<ul>
<li>
<a href="#">Menu Level 2.1</a>
<ul>
<li>
<a href="#">Menu Level 3.1</a>
<ul>
<li>
<a href="#">Menu Level 4.1</a>
<ul>
<li><a href="#">Menu Level 5.1</a></li>
<li><a href="#">Menu Level 5.2</a></li>
<li><a href="#">Menu Level 5.3</a></li>
</ul>
</li>
<li><a href="#">Menu Level 4.2</a></li>
<li><a href="#">Menu Level 4.3</a></li>
</ul>
</li>
<li><a href="#">Menu Level 3.2</a></li>
<li><a href="#">Menu Level 3.3</a></li>
</ul>
</li>
<li><a href="#">Menu Level 2.2</a></li>
<li><a href="#">Menu Level 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu Level 1.2</a></li>
<li><a href="#">Menu Level 1.3</a></li>
</ul>
</li>
<li class="menu-item-top">
<a href="#" class="top">
<span class="main-menu-icon">
<span aria-hidden="true" class="icon icon-map"></span>
</span>
<span class="main-menu-text">Maps</span>
</a>
<ul>
<li><a href="maps-google.html">Google Maps</a></li>
<li><a href="maps-vector.html">Vector Maps</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="right-column">
<div class="right-column-content container-fluid">
<div class="row">
<div class="col-xs-12">
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="form-elements.html">Forms</a>
</li>
<li class="active">
<a href="form-elements.html">Form Elements</a>
</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h1>
<span aria-hidden="true" class="icon icon-settings"></span>
<span class="main-text">
Form Validation
</span>
</h1>
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="block-heading">
<div class="main-text h2">
Registration
</div>
<div class="block-controls">
<span aria-hidden="true" class="icon icon-cross icon-size-medium block-control-remove"></span>
<span aria-hidden="true" class="icon icon-arrow-down icon-size-medium block-control-collapse"></span>
</div>
</div>
<div class="block-content-outer">
<div class="block-content-inner">
<form id="registrationForm" method="post">
<div class="form-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label class="control-label">Email address</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group">
<label class="control-label">Gender</label>
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
<div class="form-group">
<label class="control-label">Date of birth</label>
<input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
</div>
<button type="submit" class="btn btn-success">Sign up</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="block-heading">
<div class="main-text h2">
Hiding Success Class
</div>
<div class="block-controls">
<span aria-hidden="true" class="icon icon-cross icon-size-medium block-control-remove"></span>
<span aria-hidden="true" class="icon icon-arrow-down icon-size-medium block-control-collapse"></span>
</div>
</div>
<div class="block-content-outer">
<div class="block-content-inner">
<form id="hidingSuccessForm" method="post">
<div class="form-group">
<label>Proposal title</label>
<input type="text" class="form-control" name="title" />
</div>
<div class="form-group">
<label>Abstract</label>
<textarea class="form-control" name="abstract" rows="5"></textarea>
</div>
<div class="form-group">
<label>Topics</label>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="angularjs" /> AngularJS
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="backbone" /> Backbone
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="emberjs" /> EmberJS
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="jquery" /> jQuery
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="nodejs" /> NodeJS
</label>
</div>
</div>
<div class="form-group">
<label>Session type</label>
<select class="form-control" name="sessionType" style="width: 200px;">
<option value="">Choose the session type</option>
<option value="presentation">Presentation</option>
<option value="panel">Panel</option>
<option value="workshop">Workshop</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="block-heading">
<div class="main-text h2">
Validation Outside
</div>
<div class="block-controls">
<span aria-hidden="true" class="icon icon-cross icon-size-medium block-control-remove"></span>
<span aria-hidden="true" class="icon icon-arrow-down icon-size-medium block-control-collapse"></span>
</div>
</div>
<div class="block-content-outer">
<div class="block-content-inner">
<form id="reportForm" method="post" class="form-horizontal validation-outside">
<div class="form-group">
<label class="col-sm-3 control-label">Bug title</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Description</label>
<div class="col-sm-6">
<textarea class="form-control" name="description" rows="8"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Operating system</label>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="os" value="window" /> Window
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="centos" /> Centos
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="fedora" /> Fedora
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="ubuntu" /> Ubuntu
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="macos" /> Mac OS X
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Browser(s)</label>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="ie" /> IE
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="chrome" /> Chrome
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="firefox"> Firefox
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="safari" /> Safari
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="opera"> Opera
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Priority</label>
<div class="col-sm-4">
<select class="form-control" name="priority">
<option value="">Choose the priority</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-danger">Report issue</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="block-heading">
<div class="main-text h2">
More Advanced Options
</div>
<div class="block-controls">
<span aria-hidden="true" class="icon icon-cross icon-size-medium block-control-remove"></span>
<span aria-hidden="true" class="icon icon-arrow-down icon-size-medium block-control-collapse"></span>
</div>
</div>
<div class="block-content-outer">
<div class="block-content-inner">
<form id="advancedForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Price</label>
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="price" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Quantity</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="quantity" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Phone number</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="phone" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Youtube trailer</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="trailer" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">CKEditor</label>
<div class="col-sm-9">
<textarea id="ckeditor1" class="form-control" name="ckeditor1" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
<button type="button" class="btn btn-warning" id="resetButton">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-container">
<div class="footer-content">
© <a href="#?ref=Base5Builder">Circloid</a> was made with <span style="color:#FF0000;">❤</span> and supported by - <a href="http://base5builder.com/" target="_blank" style="font-weight:300;color:#ffffff;background:#1d1d1d;padding:0 3px;">Base<span style="color:#ffa733;font-weight:bold">5</span>Builder</a>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Required JS Files -->
<script type="text/javascript" src="assets/js/required/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/js/required/jquery-ui-1.11.0.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/required/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/required/jquery.easing.1.3-min.js"></script>
<script type="text/javascript" src="assets/js/required/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="assets/js/required/misc/jquery.mousewheel-3.0.6.min.js"></script>
<script type="text/javascript" src="assets/js/required/misc/retina.min.js"></script>
<script type="text/javascript" src="assets/js/required/icheck.min.js"></script>
<script type="text/javascript" src="assets/js/required/misc/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="assets/js/required/circloid-functions.js"></script>
<!-- Optional JS Files -->
<script type="text/javascript" src="assets/js/optional/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="assets/js/optional/ckeditor/adapters/jquery.js"></script> <!-- This jQuery Adapter is REQUIRED for CKEditor to function properly -->
<script type="text/javascript" src="assets/js/optional/bootstrapValidator.min.js"></script>
<!-- <script type="text/javascript" src="assets/js/optional/bootstrapValidator-language/languagecode_COUNTRYCODE.js"></script> -->
<!-- add optional JS plugin files here -->
<!-- REQUIRED: User Editable JS Files -->
<script type="text/javascript" src="assets/js/script.js"></script>
<!-- add additional User Editable files here -->
<!-- Demo JS Files -->
<script type="text/javascript" src="assets/js/demo-files/form-validation.js"></script>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=10227118;
var sc_invisible=1;
var sc_security="b8dc3e52";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="site stats"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/10227118/0/b8dc3e52/1/"
alt="site stats"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41035904-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手