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,结束。

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页