表单 基础

收集表单的信息，将信息传递到后台的服务器，然后做相应的处理

表单：

        将用户信息等本地的数据信息提交给服务器的

        比如：百度的搜索框 注册 登录这些操作都需要填写表单

1、创建表单  form标签

    属性：

    action属性（必须要写）

<form action="./target.html">

    指向的是一个服务器的地址，当我们提交表单时将会表单相关的数据提交到action属性对应的地址

2、添加表单项

     使用form创建的仅仅是一个空白的表单，

     我们还需要向form中添加不同的表单项

（1）input来创建一个文本框，

                type属性：text

                name属性：提交内容的名字

                    如果希望表单项中的数据会提交到服务器中，必须指定一个name属性        

                value属性值：作为文本框的默认值显示

                           就是用户输入的内容，也就是要提交给服务器的值

用户名：<input type="text" name="username" value="请输入用户名" />

（2）input创建一个密码框

                    type属性值:password

                    name属性：提交密码的名字

密码：<input type="password" name="password" />

（3）input创建一个单选按钮

            type属性：radio

            name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择

            value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器      

            checked属性  默认选中  可以直接添加属性，不写属性值

性别：男 <input type="radio" name="sex" checked /> 女 <input type="radio" name="sex" /> 

（4）input创建一个多选框

            type属性:checkbox

            checked属性  默认选中

兴趣爱好：唱歌 <input type="checkbox" checked /> 
         跳舞 <input type="checkbox" /> 
         跑步 <input type="checkbox" checked /> 
         诗朗诵<input type="checkbox" /> 
         古筝<input type="checkbox" />

(5)select来创建一个下拉列表

                name属性设置给select，

                value属性设置给option

                selected属性设置给option，将选项设置为默认选中

                在下拉列表中使用option标签来创建一个一个列表项

出生年月：年
      <select name="year">
        <option value="2000">2000</option>
        <option value="2001" selected>2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
      </select>
      月
      <select name="mouth">
        <option value="1月">1月</option>
        <option value="2月">2月</option>
        <option value="3月">3月</option>
        <option value="4月">4月</option>
        <option value="5月">5月</option>
      </select>

（6）textarea创建一个文本域

            name属性  提交给服务器的名字

            cols属性  设置宽度

            rows属性  设置高度

个人简介：<textarea name="info" cols="40" rows="10"></textarea>

（7）input创建一个提交按钮，点击后表单就会提交

            type属性值：submit

            value属性：指定按钮上的文字,默认是提交

<input type="submit" value="注册" />

（8）创建一个重置按钮，type="reset"

                点击重置按钮以后表单中内容将会恢复为默认值

<input type="reset" />

（9）创建一个单纯的按钮，

                这个按钮没有任何功能，只能被点击

<input type="button" value="按钮" />

（10）button标签来创建按钮

           也可以用type属性来更改button的类型，例如submit、reset、button

            方式和使用input类似，它是成对出现的标签，使用起来更加的灵活

<button type="reset">重置</button>

input属性补充

        1: autocomplete="off"  关闭自动补全

        2: readonly 设置为只读，不能修改

        3: disabled 设置为禁用

        4: autofocus  自动获取焦点

        5: placeholder 表单提示内容