壹影博客.
我在下午4点钟开始想你
HTML表单标签组<form>相关使用方法
  • 2023-2-23日
  • 4评论
  • 996围观

HTML表单标签组<form>相关使用方法

1.<form>标签自身属性

action="网络url  本地其他页面文件的地址"
method="提交数据的方式"  get或post

2.表单元素-input

在<form>标签内嵌套一个<input>标签,input标签即为表单元素具体属性如下:

  2.1 type属性   设置类型-可选常用类型

  type="text" 文本框
  type="password" 密码框
  type="submit" 提交按钮
  type="radio" 单选框
  type="checkbox" 复选框
  type="hidden" 隐藏域
  type="range" 范围条
  type="date" 日期选择
  type="reset 重置按钮
  type="button" 自定义按钮
  type="image" 图片按钮
<input type="xxx" .....>
  2.2 name属性   用于设置表单提交时 文本框传递数据的键的名字
<input type="xxx" name="xxx".....>

2.3 value属性   用于接收用户输入值

当 type="submit" 时  设置value属性 为 按钮名称
当type="radio"时 设置value属性 为单选按钮被选中项的值

2.4 maxlength属性 限制文本框能够接收的最大字符数

 

2.5 maxlength属性 用户未输入时 显示在文本框中的提示文本

2.6 checked属性 某个单选按钮为默认状态

111111111111

 

11111111111111111111

 

<!--使用方法-->
<form action="#" method="get">
 邮箱:<input type="xxx" name="mail">
<form>


<!--
 input常用属性
 type 设置元素类型
  type="text" 文本框
  type="password" 密码框
  type="submit" 提交按钮
  type="radio" 单选框
  type="checkbox" 复选框
  type="hidden" 隐藏域
  type="range" 范围条
  type="date" 日期选择
  type="reset 重置按钮
  type="button" 自定义按钮
  type="image" 图片按钮











-->

 

<form action="#" method="get">
 邮箱:<input type="text" name="mail">

<form>
1222128554

1. 基础块级标签
1.1 内容标题标签 
<h1></h1>   <h6></h6>
分别设置一至六级标题
一级标题文字最大  六级标题文字最小 
标题文字自带加粗效果 并具有默认的上下外距
1.2 内容段落标签
<p></p>
用于在文章中进行文本段落的划分
自带上下的外距
按照w3c标准 p标签不能嵌套使用
不适用于页面的分区布局
1.3 层标签
<div></div>
无任何默认修饰效果
用于进行页面分区布局的主要标签
div+css  
css 样式
1.4 水平分割线
<hr/>
横向分割线--宽度 默认为容器的100%
2. 列表标签组
2.1 有序列表标签组
<ol>
   <li>内容</li>
   <li>内容</li>
</ol>
主要使用在 页面的导航 或  列表内容中 
属性  type="1/a/A/i/I"
用于设置列表中的列表项显示的序号种类
默认为1  如果提供的属性值不在五种可选值范围内 自动使用默认值 
2.2 无序列表标签组
<ul>
   <li>内容</li>
   <li>内容</li>
</ul>
主要使用在 页面的导航 或  列表内容中 
type="disc/circle/square"
disc是默认值 代表实心圆点
2.3 定义列表标签组--不常用
<dl>
  <dt>图片</dt>
  <dd>文字</dd>
</dl>
主要用于制作页面中的图文混编效果
dt 和 dd标签的数量 以及顺序均可以按需调整
3. 表格标签组--实用性不强
<table>
   <tr>
     <td></td>
  </tr>
</table>
属性
table 的属性
border="1" 用于设置表格的边框
width=""  height="" 用于设置表格的宽度与高度 如果表格中的所有单元格都没有内容 那么表格的宽高将自动平分给单元格
align="left/center /right"
表格本身参考容器标签的对齐方式
tr 的属性
width=""  height="" 
td 的属性
width=""  height="" 
跨行
rowspan="占据的行数 "
跨列
colspan="占据的列数"
表格标签用于布局 结构过于复杂 不推荐使用 
逻辑表格
<table>
   <caption>表名</caption>
   <thead>
       单行 设置th 单元格描述表头内容
   </thead>
   <tbody>
      表的主体 由多行数据组成
   </tbody>
   <tfoot>
      表的脚部  用于放置 核算类信息或 分页信息
    </tfoot>
</table>
th单元格 文本自动居中 且 加粗 
必要的逻辑区域为<tbody></tbody>
4. 表单标签组 
4.1 表单标签
<form></form>
就是一个信件的信封
收件人地址
action="网络url  本地其他页面文件的地址"
提交数据的方式
method="get"
明信片提交数据
传输的数据暴露在url地址栏中 不安全  传输速度快
method="post"
信封提交数据
传输的数据 是隐藏传输 安全性高 传输速度较慢
4.2 表单元素
文本框
接收 账号 姓名 昵称 等文本信息的输入
<input    type="text"  />
属性
name="用于设置表单提交时 文本框传递数据的键的名字"
value="接收用户输入值"
maxlength="6"
限制文本框能够接收的最大字符数
placeholder="用户未输入时 显示在文本框中的提示文本"
密码框
接收密码信息输入
<input  type="password"/>
属性
name="用于设置表单提交时 密码框传递数据的键的名字"
value="接收用户输入值"
maxlength="6"
限制文本框能够接收的最大字符数
placeholder="用户未输入时 显示在文本框中的提示文本"
提交按钮
用户点击该按钮 则立即提交表单信息
<input   type="submit"/>
属性
value="查找"
单选按钮
提供选项给用于进行点选 只能在一组选项中选择一个
<input  type="radio" />
属性
name=""
既是传输键值对数据的键  也是多个单选按钮分组的组名
value=""
依旧设置表单提交时 单选按钮被选中项的值
必要属性
checked="checked"
设置某个单选按钮为默认选中状态
复选框
范围条
隐藏域
下拉列表
重置按钮
自定义按钮
图片按钮
属性的属性值
自定义
可选值
 

发表评论