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

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>
    Malebr>
    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.js-code.com/web/571879.html 

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！