表单标签

最新推荐文章于 2022-02-28 18:05:38 发布

hello_xujj

最新推荐文章于 2022-02-28 18:05:38 发布

阅读量134

点赞数

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/xjj19999272/article/details/115963466

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML表单的基本元素及其用法，包括单行文本框、单选按钮、复选框、密码框、下拉菜单、多行文本框以及不同类型的按钮。通过实例代码展示了如何创建和定制这些表单组件，帮助读者理解如何在网页中收集和处理用户信息。

摘要由CSDN通过智能技术生成

表单标签

表单是用来收集信息，比如注册、登录、发送评论反馈、购买商品等等。

表单的创建

所有HTML表单都以一个<form>元素开始，示例代码如下：

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

action属性表示表单要提交到的后台程序的网址，method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面），表单数据可以作为 URL 变量（method=“get”）或者 HTTP post （method=“post”）的方式来发送。

单行文本框

使用type属性值被设置为text的<input>元素可以创建单行文本框，它是一个单标签，示例代码如下：

<body>
    <form action="" method="POST">
        <p>
            <input type="text" value="123">
        </p>
        <p>
            <input type="text" placeholder="你不能输入任何东西" disabled>
        </p>
    </form>
</body>

value属性表示已经填写好的值，placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值，disabled属性表示用户不能与元素交互，即“锁死”，添加这个属性就无法输入了。代码效果如下：
在这里插入图片描述

单选按钮

使用type属性值被设置为radio的<input>元素可以创建单选按钮，示例代码如下：

<body>
    <form action="" method="POST">
        <p>
            您七天内是否离开过天津：
            <input type="radio" name="123" value="是" >是
            <input type="radio" name="123" value="否" checked>否
        </p>
    </form>
</body>

name属性为控件命名，以备后台程序 ASP、PHP 使用，互斥的单选按钮应该设置它们的name为相同值，这样同一组的单选按钮才可以起到单选的作用。value属性的值是提交数据到服务器的值，单选按钮如果加上了checked属性，表示默认被选中。代码效果如下：
在这里插入图片描述

label标签

label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮，示例代码如下：

<label>
    <input type="radio">是
    <input type="radio">否
</label>

在HTML4时代，label标签是通过for属性和单选按钮的id属性进行绑定的，示例代码如下：

<input type="radio" id="yes"><label for="yes">是</label>
<input type="radio" id="no"><label for="no">否</label>

复选框

使用type属性值被设置为checkbox的<input>元素可以创建复选框，同组复选框应该设置它们的name为相同值。复选框要有value属性值，向服务器提交的就是value值。示例代码如下：

<body>
    <form action="" method="POST">
        <p>
            爱好：
            <label>
                <input type="checkbox">篮球
            </label>
            <label>
                <input type="checkbox">跑步
            </label>
            <label>
                <input type="checkbox">下棋
            </label>
            <label>
                <input type="checkbox">爬山
            </label>
        </p>
    </form>
</body>

代码效果如下：
在这里插入图片描述

可以看到，添加复选框后，可以多个勾选。

密码框

使用type属性值被设置为password的<input>元素可以创建密码框,示例代码如下：

请输入密码：<input type="password" >

下拉菜单

<select>标签表示下拉菜单，<option>是它内部的选项，示例代码如下：

请选择支付方式
<select> 
    <option value="alipay">支付宝</option>
    <option value="wx" selected>微信</option>
    <option value="bank">网银</option>
</select>

给option设置selected属性，设置默认选中状态。代码效果如下：

在这里插入图片描述

多行文本框

<textarea></textarea>表示多行文本框,rows和cols属性，用于定义多行文本框的行数和列数，示例代码如下：

<p>
    请作自我介绍：
</p>
<p>
    <textarea  cols="30" rows="3" placeholder="请在此处介绍自己......"></textarea>
</p>

代码效果如下:
在这里插入图片描述

三种常见按钮

表单中有三种常见按钮，它们也都是input标签，type属性值不同，type属性值所对应的按钮种类如下：

type属性值	按钮种类
buttom	普通按钮，可以简写为 <button></button>
submit	提交按钮
reset	重置按钮

input类型总结

type属性值	控件
text	单行文本框
radio	单选按钮
checkbox	多选按钮
password	密码框
buttom	普通按钮
submit	提交按钮
reset	重置按钮

hello_xujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录