HTML-form表单的学习
2013-03-04 15:38
246 查看
今天主要学习form表单元素的基本知识点。
直接上代码：
<html>
<head><title>TEST FORM</title></head>
<body>
<!--action的值是提交到哪个页面(url)-->
<!--method方法指定提交数据的方式，常用两种方式是get /post-->
<form action="#" method="post">
用户名:<input type="text" name="username" size="20"/><br/>
密 码:<input type="password" name="password" size="20"/><br/>
你的主页地址:<input type="text" name="website" value="http://" /><br/>
<p>设置size和maxlength的值</p>
<input type="text" name="name01" size="40" /><br/>
<input type="text" name="name02" maxlength="5" /><br/>
<hr />
<p>复选框和单选框</p>
<input type="checkbox" name="banana">banana<br/>
<input type="checkbox" name="apple">apple<br/>
<input type="checkbox" name="orange">orange<p>
<!--注意：单选框中的name属性要一样，才有显示效果-->
<input type="radio" name="fruit">banana<br/>
<input type="radio" name="fruit" checked>apple<br/>
<input type="radio" name="fruit">orange<br/>
<p>图像坐标</p>
<input type="image" name="face" src="f.png" /><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<p>隐藏表单</p>
<input type="hidden" name="hiddenform"> Here is a hidden element.<p>
<p>列表框</p>
<!--select属性：size, multiple(多选--注意，是用 Ctrl 键配合鼠标实现多选)-->
<select name="fruits" size="3" multiple>
<option>banana
<option selected>apple
<option value="my_favorite"/> orange
<option>peach
</select><p>
<p>文本区域</p>
<textarea name="comment" rows="5" cols="60">
</textarea><p>
<input type="submit" value="登录">
<input type="reset" value="重新填写">
</form>
</body>
</html>
直接上代码：
<html>
<head><title>TEST FORM</title></head>
<body>
<!--action的值是提交到哪个页面(url)-->
<!--method方法指定提交数据的方式，常用两种方式是get /post-->
<form action="#" method="post">
用户名:<input type="text" name="username" size="20"/><br/>
密 码:<input type="password" name="password" size="20"/><br/>
你的主页地址:<input type="text" name="website" value="http://" /><br/>
<p>设置size和maxlength的值</p>
<input type="text" name="name01" size="40" /><br/>
<input type="text" name="name02" maxlength="5" /><br/>
<hr />
<p>复选框和单选框</p>
<input type="checkbox" name="banana">banana<br/>
<input type="checkbox" name="apple">apple<br/>
<input type="checkbox" name="orange">orange<p>
<!--注意：单选框中的name属性要一样，才有显示效果-->
<input type="radio" name="fruit">banana<br/>
<input type="radio" name="fruit" checked>apple<br/>
<input type="radio" name="fruit">orange<br/>
<p>图像坐标</p>
<input type="image" name="face" src="f.png" /><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<p>隐藏表单</p>
<input type="hidden" name="hiddenform"> Here is a hidden element.<p>
<p>列表框</p>
<!--select属性：size, multiple(多选--注意，是用 Ctrl 键配合鼠标实现多选)-->
<select name="fruits" size="3" multiple>
<option>banana
<option selected>apple
<option value="my_favorite"/> orange
<option>peach
</select><p>
<p>文本区域</p>
<textarea name="comment" rows="5" cols="60">
</textarea><p>
<input type="submit" value="登录">
<input type="reset" value="重新填写">
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML标签天天练7--表单4<form>[textarea]到此 表单学习结束
- HTML学习笔记-form表单（五）
- 在学习HTML——form表单中的label标签时的一点小体会
- HTML学习12－form表单
- HTML5混编学习笔记： 表单（form）、响应式web设计（RWD）
- html学习笔记之form表单
- HTML表单提交数据中application/x-www-form-urlencoded和multipart/form-data的区别
- [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist
- web学习—html标签—表单及其控件（三）
- HTML学习10：表单格式化
- HTML 5 已经可以完全脱离form 表单嵌套
- 【Html 学习笔记】第七节——表单
- JSP相关学习--form提交表单时action路径设置
- html form表单验证和用户体验代码
- HTML学习之表单备忘
- struts学习之form表单， 配置文件action对应关系。
- Django 中 form 表单如何用 view.py 关联到自定义 html 上
- HTML中<form>表单利用 post 提交与利用 get 提交时的区别
- HTML学习笔记之第八章：表单
- HTML学习之表单