您的位置:首页 > 房产 > 家装 > HTML(6)——表单

HTML(6)——表单

2025/1/10 22:05:11 来源:https://blog.csdn.net/m0_74386799/article/details/139769801  浏览:    关键词:HTML(6)——表单

目录

input标签基本使用

input标签占位

单选框radio

上传文件file

下拉菜单

文本域 

label标签

按钮 


input标签基本使用

input标签type属性值不同,则功能不同

<input type="...">

type属性值说明
text文本框,用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

input标签占位

<input type="..." placeholder="提示信息">,文本框和密码框都可使用。

单选框radio

属性名作用说明
name控件名称控件分组,同组只能选中一个
checked默认选中属性名和属性值相同,简写为一个单词

 

上传文件file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能。

<input type="file" multiple>

下拉菜单

标签:select嵌套option,select是下拉菜单整体,option是菜单的每一项,select表示默认选中,否则默认选中第一个。

<select>

  <option>北京</option>

  <option>上海</option>

  <option>广州</option>

  <option>深圳</option>

  <option selected>怀化</option>

</select>

 

文本域 

作用:多行输入文本的表单控件

标签:textarea,双标签 

label标签

作用:网页中,某个标签的说明文本,可以增大表单控件的点击范围。

写法一:

label标签只包裹内容,不包裹表单控件。

设置label标签的for属性值和表单控件的id属性值相同

<input type="radio" id="man">

<label for="man">男</label>

写法二:

使用label标签包裹文字和表单控件,不需要属性

<label><input type="radio">女</label>

按钮 

标签:

<button type="">按钮</button>

type属性值说明
submit提交按钮,点击后可以提交数据到后台(默认功能)
reset重置按钮,点击后将表单控件恢复默认值
button普通按钮,默认没有功能,一般配合JavaScript使用

需要放到form表单标签中才可使用 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com