关于html的表单元素详解(一)

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1029
收藏 0 赞 0 分享

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>

想要更加了解表单元素其中的属性,请点击链接:https://www.jb51.net/web/571879.html 

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持!

 

更多精彩内容其他人还在看

html中dom元素滚动条滚动控制小结详解

这篇文章主要介绍了html中dom元素滚动条滚动控制小结,文中通过实例代码给大家介绍了使用方法,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

如何为 Element UI 里的 autosize textarea 设置高度

这篇文章主要介绍了如何为 Element UI 里的 autosize textarea 设置高度,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML使用栅格布局实现六种筛子样式的代码详解

这篇文章主要介绍了HTML使用栅格布局实现六种筛子的样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML+CSS+JS模仿win10亮度调节效果的示例代码

这篇文章主要介绍了HTML+CSS+JS模仿win10亮度调节效果的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML+Sass实现HambergurMenu(汉堡包式菜单)

这篇文章主要介绍了HTML+Sass实现HambergurMenu,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

HTML页面自适应宽度的table(表格)

这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

HTML n种方式实现隔行变色的示例代码

这篇文章主要介绍了HTML n种方式实现隔行变色的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Table自适应以及溢出的一些设置详解

这篇文章主要介绍了Table自适应以及溢出的一些设置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

HTML如何对齐多个表单中的文本框的实现

这篇文章主要介绍了HTML如何对齐多个表单中的文本框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

html中车牌号省份简称输入键盘的示例代码

这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多