HTML常用标签-表单标签

1 表单标签

表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一

  • form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
    • action, form标签的属性之一,用于定义信息提交的服务器的地址

    • method, form标签的属性之一,用于定义信息的提交方式

      • get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
      • post post方式,数据会通过请求体发送,不会在缀到url后
  • GET和POST区别
    • GET
      • 1 参数会以键值对形式放在url后提交
      • 2 数据直接暴露在地址栏上,相对不安全
      • 3 地址栏长度有限制,所有提交的数据量不大
      • 4 地址栏上,只能是字符,不能提交文件
      • 5 相比于post效率高一些
    • POST
      • 1 参数默认不放到rul后
      • 2 数据不会直接暴露在地址栏上,相对安全
      • 3 数据是单独打包通过请求体发送,提交的数据量比较大
      • 4 请求体中,可以是字符,也可以是字节数据、可以提交文件
      • 5 相比于get效率略低一些
  • input标签,主要的表单项标签,可以用于定义表单项
    • name, input标签的属性之一,用于定义提交的参数名
    • value, input标签的属性之一,用于提交数据
    • type, input标签的属性之一,用于定义表单项类型
      • text 文本框
      • password 密码框
      • submit 提交按钮
      • reset 重置按钮
  • 代码
   <form action="http://www.baidu.com" method="get">
        用户名 <input type="text" name="username" /> <br>&nbsp;&nbsp;&nbsp;<input type="password" name="password" /> <br>
        <input type="submit"  value="登录" />
        <input type="reset"  value="重置" />
   </form>
  • 效果
    在这里插入图片描述

2 表单项标签

2.1 单行文本框

  • 代码
个性签名:<input type="text" name="signal"/><br/>
  • 效果

2.2 密码框

  • 代码
密码:<input type="password" name="secret"/><br/>
  • 效果

2.3 单选框

  • 代码
你的性别是:
<input type="radio" name="sex" value="spring" /><input type="radio" name="sex" value="summer" checked="checked" />
  • 效果

  • 说明

    • name属性相同的radio为一组,组内互斥
    • 当用户选择了一个radio并提交表单,这个radio的name属性和value属性组成一个键值对发送给服务器
    • 设置checked="checked"属性设置默认被选中的radio
    • 如果属性名和属性值一样的话,可以省略属性值,只写checked即可

2.4 复选框

  • 代码
你喜欢的球队是:
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
  • 效果
    在这里插入图片描述
  • 说明
    • 设置checked="checked"属性设置默认被选中的checkbox

2.5 下拉框

  • 代码
你喜欢的运动是:
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>
  • 效果
  • 说明
    • 下拉列表用到了两种标签,其中select标签用来定义下拉列表,而option标签设置列表项。
    • name属性在select标签中设置,value属性在option标签中设置。
    • option标签的标签体是显示出来给用户看的,提交到服务器的是value属性的值。
    • 通过在option标签中设置selected="selected"属性实现默认选中的效果。

2.6 按钮

  • 代码
<button type="button">普通按钮</button><input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button><input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button><input type="submit" value="提交按钮"/>
  • 效果
  • 说明
    • 普通按钮: 点击后无效果,需要通过JavaScript绑定单击响应函数
    • 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
    • 提交按钮: 点击后提交表单

2.7 隐藏域

  • 代码
<input type="hidden" name="userId" value="2233"/>
  • 说明
    • 通过表单隐藏域设置的表单项不会显示到页面上,用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据,例如:用户id等等。
    • readonly 只读属性 提交时携带信息
    • disabled 不可用 提交时不懈怠信息

2.8 多行文本框

  • 代码
自我介绍:<textarea name="desc"></textarea>
  • 效果
  • 说明
    • textarea没有value属性,如果要设置默认值需要写在开始和结束标签之间。

2.9 文件标签

  • 代码
头像:<input type="file" name="file"/>
  • 效果
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值