HTML表单总结

璀云霄

已于 2024-01-23 17:39:25 修改

阅读量86

点赞数

分类专栏：前端文章标签： html 前端

于 2023-03-27 00:57:14 首次发布

本文链接：https://blog.csdn.net/CloudyZfly/article/details/129781793

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

form标签

指定表单数据的提交方式和地址，有以下几种属性：

name：用于指定表单的名称，方便后续提交使用
id：表单的唯一名称，一般用于提交或样式设置
action：用于定义表单数据的提交地址
method：用于指定表单数据的提交方式，有以下几个常用值：
- get：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种方式所提交的数据不能超过4K大小
- post：以post方式进行提交，会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制
- put：用于修改数据，这种方式是 RestFul 风格的，现在可以不用考虑
- delete：用于删除数据，这种方式是 RestFul 风格的，现在可以不用考虑

文本输入框

使用 input 标签，根据 type 属性指定输入框的类型，有以下属性（部分）：

类型	作用
type="text"	单行文本框
type="password"	密码框
type="radio"	单选按钮
type="checkbox"	多选按钮
type="submit"	提交按钮
type="reset"	复位按钮
type="button"	按钮
type="image"	图像按钮
type="hidden"	隐藏域（隐藏起来，一般用户看不见,在页面中不显示，在提交表单时发送）
type="file"	文本域
value	属性的值，通常用来传输客户端到服务器的状态信息

input标签中的属性值：

属性名称	属性值	功能
name	字符串	元素的名称
value	字符串	元素的值
id	字符串	客户端唯一标识
placeholder	字符串	文本框的背景文字
size	数字	以字符个数设定的元素宽度
maxlength	数字	元素所接受的字符数上限
checked	无	元素是否被默认选中
readonly	无	规定输入字段为只读，只读字段无法修改
disabled	无	规定禁用 input 元素，被禁用的 input 元素既不可用,也不可点击
required	无	如果提交时元素中内容为空白，则不允许提交，同时在浏览器中会弹出提示文字
autofocus	无	当页面打开时，该控件自动获得光标焦点

<input type="text" id="usename" name="usename" value="zhangsan" readonly><br/>
<input type="text" name="usename1" value="zhangsan" disabled ><br />
用户密码：<input type="password" name="password" required autofocus><br>
用户性别：<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女<br />

下拉选择框

select标签：

属性名	属性值	作用
option	子项	下拉框中的选项
value	字符串	选项的值
name	字符串	下拉框的名称
multiple	"multiple"	以列表形式显示
selected	无	默认被选中的选项

<p>您的家庭住址是：
    <select name="address">
        <option value="北京" selected>兰州</option>
        <option value="西安">西安</option>
        <option value="重庆">重庆</option>
        <option value="上海">上海</option>
    </select>
</p>

文本输入域

textarea标签：

属性名	属性值	作用
name	字符串	多行文本框的名称
cols	数字	以字符个数设定的多行文本框的宽度
rows	数字	以字符个数设定的多行文本框的高度

<p>您的建议或者意见：
      <textarea name="box" rows="10" cols="30" placeholder="您的建议或者意见"></textarea>
</p>

表单整体展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <h1>用户注册</h1>
    <p>用户名称：<input type="text" name="Username" value="unknown"></p>
    <p><input type="text" name="Username" value="unknown" disabled /></p>
    <p>用户密码：<input type="Password" name="UserPass"></p>
    <p>用户性别：
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女</p>
    <p>您的爱好：
        <input type="checkbox" name="habit">足球
        <input type="checkbox" name="habit">篮球
        <input type="checkbox" name="habit">LOL
        <input type="checkbox" name="habit">韩剧
        <input type="checkbox" name="habit">王者农药</p>
    <p>邮箱：<input type="text" name="e-mail" placeholder="请输入您的邮箱"></p>
    <p>用户头像：<input type="file" name="file"></p>
    <br></br>
    <p>您的家庭住址是：
    <select name="address">
        <option value="北京" selected>兰州</option>
        <option value="西安">西安</option>
        <option value="重庆">重庆</option>
        <option value="上海">上海</option>
    </select></p>
    <p><p>您的建议或者意见：</p>
        <textarea name="box" rows="10" cols="30" placeholder="您的建议或者意见"></textarea></p>
    <p><input type="color" name="color" id="" value="">
    <input type="date" name="date" id="" value="">
    <input type="datetime-local" name="date&time" id="" value="">
    <input type="time" name="time" id="" value="">
    <input type="url" name="" id="" value="">
    <input type="range" name="range" id="" value=""></p>
</body>
</html>

效果

常用属性

字体标签的属性：

<body>
    <b>粗体</b>
    <strong>也是粗体</strong>
    <i>斜体</i>
    <em>也是斜体</em>
    <u>下划线</u>
    <del>删除线</del>
</body>

body标签的属性：

属性名	作用
Text	文本颜色
Link	链接文本的颜色
Vlink	访问过链接的文本的颜色
Alink	激活链接文本的颜色
bgcolor	背景颜色
background	背景图片（使用图片做背景）

颜色表示法：英文单词：red green blue 十六进制法：#rrggbb 0-f #000000-#ffffff
注意: 背景颜色和背景图片同时存在 优先级高的是背景图片

marquee标签（弹幕）的属性：

属性名	作用
direction	表示滚动的方向，值有left，right，up，down，默认为left
behavior	表示滚动的方式，值有scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
loop	表示循环的次数，值是正整数，默认为无限循环
scrollamount	表示运动速度，值是正整数，默认为6
scrolldelay	表示停顿时间，值是正整数，默认为0，单位是毫秒
align	表示元素的垂直对齐方式，值有top，middle，bottom，默认为middle
bgcolor	表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height	表示运动区域的高度，值是正整数，单位是像素或百分数，默认height为标签内元素的高度
width	表示运动区域的宽度，值是正整数，单位是像素或百分数，默认width=100%
hspace	表示元素到区域边界的水平距离，值是正整数，单位是像素
vspace	表示元素到区域边界的垂直距离，值是正整数，单位是像素
οnmοuseοver=this.stop()	表示当鼠标移到区域的时候滚动停止
οnmοuseοut=this.start()	表示当鼠标移开的时候继续滚动

<marquee>这波操作666！</marquee>
<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动
</marquee>       
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
<marquee scrollamount="100">我速度很快.</marquee> 
<marquee scrollamount="50">我慢了些。</marquee> 
<marquee scrolldelay="30">我小步前进。</marquee> 
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>