在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。
依赖加载模块: (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能)
<html>
<body><form>
名:<input type="text" name="firstname"><br />姓:<input type="text" name="lastname">用户:<input type="text" name="user"><br />密码:<input type="password" name="password"></form><p>请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。</p>我喜欢自行车:<input type="checkbox" name="Bike"><br />我喜欢汽车:<input type="checkbox" name="Car">男性:<input type="radio" checked="checked" name="Sex" value="male" /><br />女性:<input type="radio" name="Sex" value="female" /><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select>-----------文本域(Textarea)多行文本输入控制<p>This example cannot be editedbecause our editor uses a textareafor input,and your browser does not allowa textarea inside a textarea.</p><textarea rows="10" cols="30">
The cat was playing in the garden.<input type="button" value="Hello world!">
---------------------围绕数据的Fieldset<form> <fieldset> <legend>健康信息</legend> 身高:<input type="text" /> 体重:<input type="text" /> </fieldset></form><p>如果表单周围没有边框,说明您的浏览器太老了。</p>
</form><form action="/demo/demo_form.asp">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form><p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>
<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:<input type="checkbox" name="vehicle" value="Bike" checked="checked" /><br />I have a car: <input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /><br /><br /><input type="submit" value="Submit" /></form><p>如果您点击 "Submit" 按钮,您将把输入传送到名为 html_form_action.asp 的新页面。</p>
<input type="radio" name="sex" value="male" checked>Male
<br><input type="radio" name="sex" value="female">Female----------------------------<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"><h3>这个表单会把电子邮件发送到 W3School。</h3>姓名:<br /><input type="text" name="name" value="yourname" size="20"><br />电邮:<br /><input type="text" name="mail" value="yourmail" size="20"><br />内容:<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br /><input type="submit" value="发送"><input type="reset" value="重置">--注释:form 元素是块级元素,其前后会产生折行。定义和用法<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。</form></body></html>