html学习04

本文详细介绍了HTML表单的基本结构,包括form标签的method和action属性,以及input(文本、密码、单选/多选、按钮、文件域等)、textarea和select标签的使用、属性和示例。重点展示了如何创建和配置这些表单元素以满足不同需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表单标签

  • 表单标签form
<form name="表单名称" method="表单提交方式" action="处理表单的文件"></form>

属性:

action:文件路径(表单提交后,处理表单的文件

method:请求方式 method 属性用来明确表单的提交方式。

method 属性设置为 get 时,传递的数据量受到浏览器种类和版本的限制

name:字符串(表单的名称。)

  • 表单元素

由三种标签构成:input、textarea、select它们都要包含在form标签中才有效(当然HTML5扩展了一个button标签)

  • input标签

语法格式如下:

<input type="元素类型" name="元素名称" value=”元素值”id="客户端唯一标识">

type中有不同元素类型:

类型作用
type=”text“单行文本框
type="password"密码框

type=”radio“

单选
type=”checkbox“多选
type=”submit“提交
type=”reset“复位
type=”button“按钮
type=”image“图像
type=”hidden“隐藏域
type=”file“文件域
input 标签的其它属性:
属性名称属性值功能
name字符串元素名称
value字符串元素值
id字符串客户端唯一标识
size数字以字符个数设定的元素宽度
maxlength数字元素接受字符数的上限
checked元素是否被选中
<label for="usename">用户名称:</label>
<input type="text" id="usename" name="usename" value="lh" readonly/><br/>
<input type="text" name="usename1" value="lh" disabled /><br />
用户密码:<input type="password" name="password" required autofocus /><br>
用户性别:<input type="radio" value="男" name="gender" checked />男
<input type="radio" value="女" name="gender"/>女<br />
您的爱好:
<input type="checkbox" value="football" name="fav" />足球
<input type="checkbox" value="篮球" name="fav" />篮球
<input type="checkbox" value="LOL" name="fav" />LOL
<input type="checkbox" value="韩剧" name="fav" />韩剧
<input type="checkbox" value="王者荣耀" name="fav" />王者荣耀
<br />
邮箱:
<input type="email" name="email" placeholder="请输入您的邮箱" /><br>
用户头像:<input type="file" name="avatar" id="avatar" /><br>
<input type="hidden" name="id" value="12"/><br />

  • select标签

下拉选择框

<select name="元素名称" multiple="multiple">
<option value=”值" selected>选项 1</option>
<option value=”值" >选项 2</option>
<option value=”值" >选项 3</option>
<option value=”值" >选项 4</option>
</select>
属性名称
属性值
属性作用
option
子项
下拉框中的选项
value
字符串
选项的值
name
字符串
下拉框的名称
selected
默认被选中的选项
multiple
"multiple"
以列表形式显示
select 标签设置 multiple 属性时, select 以列表形式显示,当 select 标签不设置 multiple
属性时,以下拉框形式显示。列表框在选择时按住键盘的 ctrl shix 键可以实现多选,而下拉框只
能单选。

  • textarea标签
属性名称
属性值
属性作用
cols
数字
以字符个数设定的多行文本框的宽度
cols
数字
以行数设定的多行文本框的高度
name
字符串
多行文本框的名称
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值