关于html的表单元素详解(一)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
HTML 表单用于搜集不同类型的用户输入
HTML 表单用于收集用户输入;
form 元素定义 HTML 表单。
<form> form elements </form>
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。
如果省略 action 属性,则 action 会被设置为当前页面
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
何时使用 GET?
您能够使用 GET(默认方法):
如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。
当您使用 GET 时,表单数据在页面地址栏中是可见的:action.jsp?name=xxxx&sex=female
*ps:GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST?
您应该使用 POST:
如果表单正在更新数据,或者包含敏感信息(例如密码)。
POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
HTML 表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮、文本域等
<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态,根据不同的 type 属性。
-文本输入:type=”text”
<form> <label>用户名</label> <input type="text" name=""> </form>
-提交按钮:type=”submit”(定义提交表单数据至表单处理程序的按钮)
<form action="action.jsp"> <input type="submit" value="提交"> </form> /*和action配合*/
/*如果省略了提交按钮的 value 属性,那么该按钮将获得默认文本,也就是提交两个字*/
-单选:type=”radio”
<form> <label>性别</label> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form> /*name中的值一致时,可以达到单选的效果*/ /*checked 是被选中状态 也可以写成checked="checked"*/
-复选:type=”checkbox”
<form> <label>爱好</label> <input type="checkbox" name="vehicle" value="运动"><label>运动</label> <br> <input type="checkbox" name="vehicle" value="美女"> <label>美女</label> </form> /*checked 是被选中状态 也可以写成checked="checked"*/
-定义按钮:type=”button”
<form> <input type="button" onclick="alert('欢迎来到程序员之家!')" value="点我!"> </form> /*也是普通按钮*/
-下拉列表:< select > 元素
<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> <option> 元素定义待选择的选项。 列表通常会把首个选项显示为被选选项。 您能够通过添加 selected 属性来定义预定义选项。
-文本域:< textarea> 元素(定义多行输入字段)
<form> <textarea name="message" rows="10" cols="30"> 输入的内容在这里哦! </textarea>
-按钮:< button> 元素
<form> <button type="button" onclick="alert('欢迎来到程序员之家!')">点击!</button>
想要更加了解表单元素其中的属性,请点击链接:/web/571879.html
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对程序员之家的支持!
相关文章
- 这篇文章主要介绍了关于html的表单元素,通过介绍value 属性,readonly 属性,disabled 属性,size 属性,maxlength 属性,width 属性等详细解释了表单元素的组成和应用,2017-08-16
- 本文主要对HTML5表单新增属性进行详细介绍,并附上实例解析,简单易懂。需要的朋友一起来看下吧2016-12-21
- 下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-26
jQuery使用addel.js插件实现动态添加删除表单元素特效源码
jQuery使用addel.js插件实现动态添加删除表单元素特效源码是一款基于addel.js插件实现的动态表单增删特效。感兴趣的朋友不妨前来下载源码哦2016-05-11- 是一款基于jquery.dynamic-rows插件实现的表单添加删除特效代码。本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用2015-07-07
drupal将Date表单元素月日年的顺序改造为年月日的方法
这篇文章主要为大家介绍了drupal将Date表单元素月日年的顺序改造为年月日的方法,是很多drupal用户在进行二次开发的时候都会遇到的问题,需要的朋友可以参考下2014-11-04HTML5 的新的表单元素(datalist/keygen/output)使用介绍
HTML5 拥有若干涉及表单的元素和属性,下面为大家介绍下新的表单元素datalist 元素、keygen 元素、output 元素以及它们的使用实例,感兴趣的朋友可以参考下哈,希望对大家2013-07-19
最新评论