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

HTML教程 2025-08-21

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 >

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

注:相关教程知识阅读请移步到HTML教程频道。