表单标签

1. form 标签

<!-- form 标签:划定一个表单区域
action: 数据的提交地址
method: 提交方式
get: (默认方式)通过 url 地址传输数据,数据会显示在 url 地址栏中,相对来说不安全
传输数据有大小限制,不同浏览器传输的数据大小不同 post: 数据不通过 url 地址传参,相对来说较安全
数据传输没有具体的大小限制
一般表单指定使用 post 方式提交数据 enctype: 如果表单当中有文件上传,必须添加这个属性
指定属性值为 multipart/form-data 用于文件转码 -->
<form action="" method="post" enctype="multipart/form-data"></form>

2. 表单控件

type 的参数 释义
text 单行的输入字段,可输入文本,默认宽度为 20 个字符
password 密码框
radio 单选按钮
checkbox 多选按钮
file 输入字段和 "浏览"按钮,供文件上传
submit 提交按钮,会把表单数据发送到服务器
button 按钮
reset 重置按钮
hidden 隐藏输入的字段
image 图片按钮
type 的新参数 释义
range 滑动按钮
color 取色按钮
number 数字按钮
date 日期按钮
email email 地址的输入域
... ...

2.1 登录框

<!-- input
type: 指定表单类型
text: 普通文本
password: 密码框 {username:york, gender:1, love:[s, b, p], education:3} -->
<form method="post" enctype="multipart/form-data">
用户名:<input type="text" name="username" placeholder="请输入用户名"> <br>
密 码:<input type="password" name="password"> <br>
</form>
  • 效果

用户名:

密 码:

2.2 单选按钮

<!-- type="radio"

    必须有 name 属性和 value 属性
一组单选框 name 属性的值必须相同 -->
<form method="post" enctype="multipart/form-data">
性别:
<input type="radio" name="gender" value="1" checked> 男
<input type="radio" name="gender" value="0"> 女
</form>
  • 效果

性别:

2.3 多选按钮

<!-- type="checkbox"

    必须指定 name 属性和 value 属性
一组多选框 name 属性的值要相同 -->
<form method="post" enctype="multipart/form-data">
爱好: <br>
<input type="checkbox" name="hobbies[]" value="s" checked> 足球 <br>
<input type="checkbox" name="hobbies[]" value="b"> 羽毛球 <br>
<input type="checkbox" name="hobbies[]" value="p"> 乒乓球 <br>
</form>
  • 效果

爱好:

足球

羽毛球

乒乓球

3. select 标签

<!-- 下拉选项框必须配合 option 来使用 -->
<form method="post" enctype="multipart/form-data">
学历:
<select name="education" >
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">大学</option>
</select>
</form>
  • 效果

学历:

小学
初中
高中
大学

4 文件上传

<!-- type="file" -->
<form method="post" enctype="multipart/form-data"> <!-- 上传文件时,enctype 不可少 -->
请选择要上传的文件:<input type="file" name="file">
</form>
  • 效果

请选择要上传的文件:

5. textarea 标签

<!-- 多行文本输入 -->
<form method="post" enctype="multipart/form-data">
请输入个人说明: <br>
<textarea name="text" id="">请输入个人信息</textarea> <!-- 按住左下角可以改变输入框的大小 -->
</form>
  • 效果

请输入个人说明:

请输入个人信息

6. 按钮

<!--
type="submit"
type="button"
type="reset" 适用范围:botton > input button > input submit-->
<form method="post" enctype="multipart/form-data">
<input type="submit" value="确定"> <br>
<input type="button" value="按钮"> <br>
<input type="reset" disabled> <br>
<button>提交</button>
</form>
  • 效果

提交

7. 隐藏域

<!-- hidden: 不需要用户查看和填写的信息 -->
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="0">
</form>
  • 效果

下面有一个隐藏的 input

8. 图片

<!-- type="image" -->
<form method="post" enctype="multipart/form-data">
<input type="image" src="xxx.jpg" alt="xxx.jpg">
</form>
  • 效果:略

9. 滑动条

<!-- type="range" 此处使用 ie 效果较好 -->
<form method="post" enctype="multipart/form-data">
<input type="range" min="0px" max="500px" value="100px" step="100px">
</form>
  • 效果

10. 取色

<!-- type="color" -->
<form method="post" enctype="multipart/form-data">
<input type="color">
</form>
  • 效果

11. 数字

<!-- type="number" -->
<form method="post" enctype="multipart/form-data">
<input type="number" min="1" max="5">
</form>
  • 效果

12. 日期

<!-- type="date" -->
<form method="post" enctype="multipart/form-data">
<input type="date">
</form>
  • 效果

13. email


<!-- type="email" -->
<form method="post" enctype="multipart/form-data">
<input type="email">
</form>
  • 效果

[Web 前端] 003 html 表单标签的更多相关文章

  1. 前端开发HTML5——表单标签

    表单简介 Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用.form通常由一到多个表单元素组成,这些表单元素是单行/多行 ...

  2. 前端 HTML form表单标签 textarea标签 多行文本

    <textarea></textarea>作用:允许用户录入多行数据到表单控件中 <!DOCTYPE html> <html lang="en&qu ...

  3. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  4. 前端 HTML form表单标签 select标签 option 下拉框

    <select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...

  5. 前端 HTML form表单标签 input标签 type属性 重置按钮 reset

    input type="reset" value="重置" reset重置 还原到默认状态 <!DOCTYPE html> <html lan ...

  6. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

  7. 前端 HTML form表单标签 input标签 type属性 checkbox 多选框

    多选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. css 表单标签两端对齐

    来自:http://demo.doyoe.com/css3/justify/justify-form.htm  侵删 <!DOCTYPE html> <html lang=" ...

  9. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

随机推荐

  1. vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)

    :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗. 当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出 ...

  2. bzoj5090 [Lydsy1711月赛]组题 分数规划

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5090 题解 令 \(s_i\) 表示 \(a_i\) 的前缀和. 那么平均难度系数就是 \[ ...

  3. HTML加载过程

    在地址栏输入url,返回html后,浏览器开始顺序加载并渲染DOM Body标签 当浏览器遇到body标签才算真正开始加载并渲染DOM,此时会有以下几种情况: DOM元素 浏览器遇到dom元素时,正常 ...

  4. C++ GUI Qt4学习笔记05

    C++ GUI Qt4学习笔记05   qtc++正则表达式 QIntValidator           --  只让用户输入整数 QDoubleValidator     --  只让用户输入浮 ...

  5. RouterOS基础安装配置

    安装 光盘安装 载入光盘,按"A"全选按"I"进行安装,然后提示不否用旧的配置,按"N"全新安装,警告时按"Y"确定 安 ...

  6. Git之仓库管理

    介绍以及安装: Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版本管理. Git 最初是由Linus Torvalds设计开发的,用于管理Linux内核开发.Git ...

  7. SpringCloud学习系列-微服务

    最近和尚硅谷周阳老师学习了Spring Cloud感觉有必要在这里做下笔记和总结. 软件系统架构演变 单一应用架构当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用 ...

  8. a标签禁止跳转

    方法一: <a href="javascipt:void(0)>....</a>

  9. 【bzoj1588】[HNOI2002]营业额统计

    题目描述: 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额. ...

  10. sh_06_个人信息

    sh_06_个人信息 """ 姓名:小明 年龄:18 岁 性别:是男生 身高:1.75 米 体重:75.0 公斤 """ # 在 Pytho ...