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>