HTML的表单元素（整理）

关于HTML最后的知识点，就写一篇关于表单元素的知识总结。
form元素
HTML 表单用于收集用户输入。

form元素定义 HTML 表单：

    <form action="">
        <p>这是一个表单</p>
    </form>

可以吧这个理解为一个框架，在这里面写一些表单元素。

一、文本输入
《input type=“text”》定义用于文本输入的单行输入字段：

    <form action="">
        <p>这是一个表单</p>
        <p>请输入名字：</p>
        <input type="text" name="name" id="">
    </form>

看一下：

注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

二、单选按钮输入

《input type=“radio”》定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

        <br>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女

看一下在网页中的显示。

就是一个单选框。

三、提交按钮
《input type=“submit”》 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

    <form action="">
        <p>这是一个表单</p>
        <p>请输入名字：</p>
        <input type="text" name="name" id="">
        <br>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
        <br>
        <input type="submit" value="提交">
    </form>

可以看到我选中了女这个选项，然后名字写的123，当我点击提交按钮后。

可以看到网页的连接会显示这个信息。这也是为什么之前的input标签里面name属性和value属性要给值得原因。

然后就是最开始我写form表单的时候，没有给action这个写值。

四、Action 属性
action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

如果省略 action 属性，则 action 会被设置为当前页面。

五、select元素（下拉列表）
select元素定义下拉列表：

        <br>
        <select name="饮料" id="">
            <option value="coffee">coffee</option>
            <option value="tea">tea</option>
        </select>

然后看一下：

一个简单的下拉框。

六、textarea 元素

textarea 元素定义多行输入字段（文本域）

        <br>
        <textarea name="text" id="" cols="30" rows="10">
            this is a pritty boy 
        </textarea>

七、button元素

button元素定义可点击的按钮：

        <br>
        <button>这是一个按钮</button>

八、输入类型：password

《input type=“password”>》定义密码字段：

        <p>请输入密码</p>
        <input type="password" name="psw" id="">

这样内容就会被隐藏。

九、Input Type: checkbox
《input type=“checkbox”》 定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

        <br>
        <input type="checkbox" name="hobby" value="唱歌">唱歌
        <input type="checkbox" name="hobby" value="看动作电影">看动作电影

显示出一个复选按钮。

关于表单元素，还有很多其他的输入类型，很多其他的属性，很多其他的元素，这里我也不一一列举了。

OK，结束。