[HTML]表单标签(form表单域、input输入表单、label标签、select下拉表单、textarea文本域)

本博文介绍HTML中的表单标签。

表单 = 表单域 + 表单控件 + 提示信息,下面说说表单域和表单控件。

1 表单域标签:<form></form>

        基本格式:

        <form action="url" method="提交方式" name="表单域名称">

                各种表单元素控件

        </form>

        参数说明:

参数说明
action用于指定接收并处理表单数据的服务器程序的URL
method用于设置表单数据的提交方式,其取值为get或者post
name指定表单的名称

2 表单控件(表单元素)

  • input输入表单元素

        基本格式:<input type="表单类型" name="表单名称" value="表单的值">

        input的常用属性:

属性名说明
type决定输入类型,可选值及说明在下表
name定义input元素的名称
id标签的唯一标识
value规定input元素的值
checked规定此input元素首次加载时被选中,用法:checked="checked"
maxlength规定表单中输入字符串的最大长度

        属性type的可选值:

可选值说明
button可点击按钮(结合js搭配使用)
file定义输入字段和“浏览”按钮,供文件上传
checkbox复选框(表单属性name需要相同)
password密码字段,字段中字符被掩码
hidden隐藏的输入字段
radio单选按钮(表单属性name需要相同)
reset重置按钮,清除表单数据
text单行输入字段,默认宽度为20字符
submit提交按钮,可将表单数据发送到服务器
  • label标签

        用处:绑定一个表单元素,当点击label标签内文本时,浏览器自动将光标转到(或选择)对应的表单元素。注意label的for属性值要和input的id属性值一致。

        基本格式:<label for="input的id值">标签内文本</label>

        举例:

        <label for="字符串">男</label>

        <input type="radio" name = "sex" id="字符串">

        此时用户点击“男”,则会选中单选按钮。

  • select下拉表单元素

        基本格式:

        <select>

                <option>选项1</option>

                <option>选项2</option>

        </select>

        注意:<option>中添加selected = "selected",则表示默认选中。

  • textarea文本域元素

        基本格式:

        <textarea rows="行数" cols="列数">

                文本内容

        </textarea>

        参数说明:

参数说明
rows文本域的行数
cols文本域的列数

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值