1. 首页首页
  2. 科技前沿科技前沿

2025年HTML 表单控件

科技前沿 • • 阅读 35

HTML 表单控件标签 文件标签 构成 html 最基本的标签 html html 文档的根标签 head 头标签 用于指定 html 文档的一些属性 引入外部的资源 title 标题标签 body 体标签 lt DOCTYPE html gt html5 中定义该文档是 html 文档

大家好，我是讯享网，很高兴认识大家。

标签

文件标签：构成html最基本的标签

html：html文档的根标签
head：头标签，用于指定html文档的一些属性，引入外部的资源
title：标题标签
body：体标签
<!DOCTYPE html>:html5中定义该文档是html文档

讯享网

文本标签：和文本有关的标签

讯享网<h1> ~ <h6>:段落标签 <p>:段落标签 <br>：换行标签 <hr>：显示水平线corol：颜色 width：宽度 size：高度 align：对其方式（center居中，left，左对齐，right，右对齐） <b>：加粗 <u>：下划线标签，在文字的下方有一条横线 <i>：斜体 <font>：字体标签（face：楷体，corol：颜色，size：大小） <center>:文本居中
特殊字符

特殊字符，需要使用转义字符

在这里插入图片描述
讯享网

图片、音频、视频标签

在这里插入图片描述

<img src="../img/a.jpg" width="300" height="400"> <audio src="b.mp3" controls></audio> <video src="c.mp4" controls width="500" height="300"></video>
  • img：定义图片
    • src：规定显示图像的 URL（统一资源定位符）
    • height：定义图像的高度
    • width：定义图像的宽度
  • audio：定义音频。支持的音频格式：MP3、WAV、OGG
    • src：规定音频的 URL
    • controls：显示播放控件
  • video：定义视频。支持的音频格式：MP4, WebM、OGG
    • src：规定视频的 URL
    • controls：显示播放控件
超链接标签
讯享网<a href="https://www.itcast.cn" target="_self">点我有惊喜</a>

标签属性：

  • href：指定访问资源的URL
  • target：指定打开资源的方式
    • _self：默认值，在当前页面打开
    • _blank：在空白页面打开
列表标签

在这里插入图片描述

表格标签
  • table ：定义表格
    • border：规定表格边框的宽度
    • width ：规定表格的宽度
    • cellspacing：规定单元格之间的空白
  • tr ：定义行
    • align：定义表格行的内容对齐方式
  • td ：定义单元格
    • rowspan:规定单元格可横跨的行数
    • colspan:规定单元格可横跨的列数

  • th：定义表头单元格
布局标签

在这里插入图片描述
div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。

表单标签

表单：用于采集用户输入的数据的，用于和服务器进行交互

form:用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
属性：action：指定提交数据的URL
method：指定提交方式 get/post
表单项中的数据要想被提交：必须指定其name属性

<form action="#" method="get"> 用户名：<input name="username"><br> 密码：<input name="password"><br> <input type="submit" value="登录"> </form>
get/post区别
表单项标签

在这里插入图片描述

input：可以通过type属性值，改变元素展示的样式
type：属性

在这里插入图片描述

text：文本输入框（placeholder：给一个框u昂的提示信息、label可同步用户名和用户名输入框）

讯享网<label for="username">用户名：<input name="username" placeholder="请输入用户名" id="username">

label的for属性一般会和input的id属性值对应，如果对应了，则点击lable区域，会让input输入框获取焦点

性别：<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女

checkbox:复选框（一般会给每一个单选框提供value属性，指定其被选中后提交的值、当需要打开时默认选中则需要加checked属性）checke="checked"指定默认值

讯享网爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街 <input type="checkbox" name="hobby" value="java" checke="checked"> java

file:文件选择框

图片：<input type="file" name="file">

hidden：隐藏域

讯享网隐藏域：<input type="hidden" name="id" value="aaa"><br>

submit：提交表单

<input type="submit" value="登录">

button：一个按钮

讯享网<input type="button" value="一个按钮">

image：图片提交按钮，可通过src属性指定图片的路径

<input type="image" src="图片路径">

color：取色器

讯享网<input type="color" src="color">

date：日期

<input type="date" name="birthday">

datetime：含有小时分钟的日期

讯享网<input type="datetime-local" name="birthday">

email：邮箱，可自动做一个基本校验

<input type="email" name="emile">

number：只能输入数字

讯享网<input type="number" name="age">
select：下拉列表 option:指定子列表项
省份：<select name="province"> <option value="">请选择</option> <option value="1">陕西</option> <option value="2">上海</option> </select>
textarea：文本域

cols：指定列数 rows：指定行数

输入一个五行，每行20个字符

讯享网</select> 自我描述：<textarea cols="20" rows="5"> </textarea>
小讯
上一篇 2025-04-09 21:44
下一篇 2025-03-31 12:59

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/18132.html