Web开发之HTML表单标签学习
来源:互联网 发布:跳水 知乎 编辑:程序博客网 时间:2024/04/29 23:36
本文根据慕课网视频整理:http://www.imooc.com/code/415
<form>
表单提交
使用示例:
<form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /></form>
<form>
标签是成对出现的,以<form>
开始,以</form>
结束。- action:浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
- method:数据传送的方式(get/post)。
文本输入框/密码输入框
使用示例:
<form> <input type="text/password" name="名称" value="文本" /></form>
- type:当type=”text”时,输入框为文本输入框;当type=”password”时, 输入框为密码输入框。
- name:为文本框命名,以备后台程序ASP 、PHP使用。
- value:为文本输入框设置默认值。(一般起到提示作用)
单选框、复选框
使用示例:
<form><input type="radio/checkbox" value="值" name="名称" checked="checked"/></form>
- type:当 type=”radio” 时,控件为单选框;当 type=”checkbox” 时,控件为复选框
- value:提交数据到服务器的值(后台程序PHP使用)
- name:为控件命名,以备后台程序 ASP、PHP 使用
- checked:当设置 checked=”checked” 时,该选项被默认选中
- 注意:同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
文本域,支持多行文本输入
使用示例:
<form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10">在这里输入内容...</textarea></form>
<textarea>
标签是成对出现的,以<textarea>
开始,以</textarea>
结束。cols
:多行输入域的列数。rows
:多行输入域的行数。- 在标签之间可以输入默认值。
下拉列表框进行单选
使用示例:
<form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书" selected="selected">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select></form>
<option>
标签中value
为向服务器提交的值,中间包裹的文字问显示的值<selected>
属性表示默认选中的值,如果存在多个,以最后一个为准
下拉列表框进行多选
使用示例:
<form action="save.php" method="post" > <label>爱好:</label> <select multiple="multiple"> <option value="看书" selected="selected">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select></form>
- 运行在网页上时,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项
提交按钮、重置按钮
使用示例:
<form method="post" action="save.php"> <label for="myName">姓名:</label> <input type="text" value=" " name="myName " /> <input type="submit" value="提交" name="submitBtn" /> <input type="reset" value="重置" name="resetBtn"/></form>
type
:当type
值设置为”submit”时,按钮的作用是提交,为”reset”时,按钮的作用是重置- value:按钮上显示的文字
label
标签
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)
使用示例:
<form> 你对什么运动感兴趣: <br> <label for="slowrun">慢跑</label> <input type="checkbox" name="slowrun" id="slowrun" /> <br> <label for="climb">登山</label> <input type="checkbox" name="climb" id="climb"/> <br> <label for="basketball">篮球</label> <input type="checkbox" name="basketball" id="basketball"/></form>
- 注意:
<label>
标签的for
属性中的值应当与相关控件的id
属性值一定要相同。
0 0
- Web开发之HTML表单标签学习
- WEB前端开发学习----3.HTML表单form标签
- Web开发之HTML基本标签学习
- HTML学习之路06-表单标签
- HTML之表单标签
- Html之表单标签
- html之表单标签
- HTML学习9:常用标签之表单标签
- HTML学习5:常用标签之表单标签
- HTML学习笔记----表单标签
- HTML学习6-表单标签
- HTML学习08-表单标签
- HTML语言标签之表单
- HTML之表单标签小结
- 学习Html开发之旅---常用标签
- HTML标签之常见表单标签
- HTML学习之表单
- HTML学习之表单
- Excel Sheet Column Number
- js基础3应用案例
- Linux CentOS 7电源管理设置(合盖不睡眠)
- verilog学习实例——编码器
- FastRCNN ubuntu14.04 GPU下配置
- Web开发之HTML表单标签学习
- MySQL搭建系列之多实例
- 采用SCRT调试python脚本发现总是报不能对齐的错误
- C#图解教程---类和继承
- [Week 1]【Leetcode】Reverse Integer(逆序问题)
- HDU1533-KM
- SmartImage的使用
- java基础知识(5)—一起加强加强java基础吧
- 欢迎使用CSDN-markdown编辑器