thml表单学习笔记

thml表单学习笔记

HTML中的< form >标签用于创建表单，表单是让用户进行信息输入的，然后将输入的数据提交到服务器上，服务器再根据提交的数据进行分析验证反馈结果。

表单最常用的场景：登录、注册、搜索等。

表单可以包含很多元素，比如< input >、< textarea>、< selected >等

< form >标签的常用属性：

1.action：指定服务器地址
2.method：指定表单数据的提交方式

​ method可选择的的有get和post。get是默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高。post的效率低，安全，可携带大量的数据，不会在地址栏中显示。

<form action="#" method=""></form>

< input >标签

< input > 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

< input >标签的type属性的值为text时

<!-- action指定服务器地址，这里先用#占位符 method属性不写值默认是get-->
<form action="#" method="">
    <!-- 
    text类型的<input>标签:
    type属性不指定值，就默认为是text，text是可输入文本的单行文本输入框。 
    name和value是一对键值对，
    value是要提交的数据，name是该标签提交的数据的标识，
    只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
    placeholder：设置输入框中的文本提示，该属性在IE8以下不生效
    -->
    <input type="" name="username" value="" placeholder="输入手机号或邮箱">
</form>

以上在网页中显示为

用< label >标签绑定< input >标签

<form action="#" method="">
    <!--
        for里的值设置为input标签的id值，就与该input标签绑定了
        效果是在网页中点击该标签（网页中是"用户名："）就等于点击到input标签
     -->
    <label for="username">用户名：</label>
    <!-- 
        id：作为该标签的唯一标识
    -->
    <input type="" id="username" name