<html> <head> <style type="text/css"> legend {background:red;width:200px} </style> </head> <body> <p>表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。</p> <h1>输入</h1> <h4>文本域（Text Fields）</h4> <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form> <h4>文本域（Textarea）多行文本输入控件</h4> <p>注意：后面必须添加封闭标签，否则，所有在textarea之后的东西全部作为文本域（Textarea）中的内容啦！</p> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> <h4>密码域</h4> <form> 用户名: <input type="text" name="user" /> <br /> 密码: <input type="password" name="password" /> </form> <p> 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 </p> <h4>单选按钮（Radio Buttons）</h4> <form> <input type="radio" name="sex" value="male">Male <br /> <input type="radio" name="sex" value="female">Female </form> <h4>复选框（Checkboxes）</h4> <form> <input type="checkbox" name="bike"> I have a bike. <br /> <input type="checkbox" name="car"> I have a car. <br /> <input type="checkbox" name="moto"> I have a moto. </form> <h1>表单的动作属性(action)和确认按钮</h1> <p>假如在下面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。</p> <form name="input" action="XXX.asp" nethod="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> <h4>简单的下拉菜单</h4> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="audi">Audi</option> <option value="benz">Benz</option> <option value="baoma">Baoma</option> </select> </form> <h4>可以更改默认选择的下拉菜单</h4> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="audi">Audi</option> <option value="benz" selected="selected">Benz</option> <option value="baoma">Baoma</option> </select> </form> <h4>创建按钮</h4> <form> <input type="button" name="helloworld" value="Hello World！"> </form> <h4>Fieldset around data：如何在数据周围画一个带标题的框</h4> <p>经试验，这样加的框，占满整个浏览页面的宽度哦。</p> <fieldset> <legend>健康信息</legend> <form> <p><label>身高：<input type="text" name="height"/></label></p> <p><label>体重：<input type="text" name="weight"/></label></p> </form> </fieldset> <h4>从表单发送电子邮件</h4> <p>其中，enctype="text/plain"意思是按照纯文本方式编码，enctype意思是编码类型</p> <form action="MAILTO:someone@uestc.edu.cn" method="post" enctype="text/plain"> 姓名：<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="content" size="50"> <br /> <br /> <input type="submit" value="发送"> <input type="reset" value="重置"> </form> </body> </html>
其中涉及到的asp的东西就没有写啦，还没学。。。
另外，每个浏览器对按钮，文本框，下拉列表的显示还是有点区别：
360：（IE与360一样，因为内核相同吧）
chrome：
chrome的还是好看些。。。