html基础-form表单、input输入框、select选择框与文本框
HTML标签:表单标签
概念:用于采集用户输入的数据的。用于和服务器进行交互
表单标签 form:
用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
form表单属性:
1)action:指定提交数据的URL
2)method:指定提交方式,分类:一共7种,2种比较常用
get:1.请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2.请求参数大小是有限制的。
3.不太安全。
post:1.请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2.请求参数的大小没有限制。
3.较为安全。
3)表单项中的数据要想被提交:必须指定其name属性
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="/login" method="post">
用户名:<input name="username"><br>
密码:<input name="password"><br>
<!--登陆按钮-->
<input type="submit" value="登录" >
</form>
</body>
</html>
结果:
input标签:可以通过type属性值,改变元素展示的样式
label:指定输入项的文字描述信息, label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。语法格式:
<label for="username"> 用户名 </label>:<input type="text" name="username" placeholder="请输入用户名" id="username">
type属性:1)text:文本输入框,默认值;placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
2)password:密码输入框 (密文显示)
3)radio:单选框 checked默认选中
*要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
*一般会给每一个单选框提供value属性,指定其被选中后提交的值
*checked属性,可以指定默认值
4)checkbox:复选框
*一般会给每一个单选框提供value属性,指定其被选中后提交的值
*checked属性,可以指定默认值
5) file:文件选择框
6) hidden:隐藏域,用于提交一些信息。
7)按钮:
submit:提交按钮。可以提交表单
button:普通按钮
image:图片提交按钮,src属性指定图片的路径
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="/login" method="get">
<label for="username"> 用户名 </label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
<!-- type=password密码加密, placeholder 为表单的默认的文案-->
密码:<input type="password" name="password" placeholder="请输入密码"><br>
<!--radio单选框,要想实现单选 name值必须一致;value指定之后get带参-->
性别:<input type="radio" name="gender" value="male" > 男
<input type="radio" name="gender" value="female" checked> 女
<br>
<!-- checkbox复选框,checked默认被选中-->
爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="game"> 游戏<br>
图片: <input type="file" name="file"><br>
隐藏域:<input type="hidden" name="id" value="aaa"> <br>
取色器:<input type="color" name="color"><br>
<!-- 展示一个日期 年月日 2020-01-02-->
生日:<input type="date" name="birthday"> <br>
<!-- 展示一个日期 年月日 时分秒 -->
生日:<input type="datetime-local" name="birthday"> <br>
<!-- 校验邮箱是否有@-->
邮箱:<input type="email" name="email"> <br>
<!-- 只能输入数字-->
年龄:<input type="number" name="age"> <br>
<!--button后面可以与javascript一起使用实现动态的效果-->
<input type="submit" value="登录" >
<input type="button" value="一个按钮" ><br>
<input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>
结果:
select: 下拉列表
子元素:option,指定列表项
textarea:文本域
cols:指定列数,每一行有多少个字符; rows:默认多少行。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="/login" method="get">
省份:<select name="province">
<!-- 请选择不被提交 selected表示默认选中的-->
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">陕西</option>
</select><br>
<!--文本域 cols列 rows行数-->
自我描述:
<textarea cols="20" rows="5" name="des"></textarea><br>
</form>
</body>
</html>
结果:
原文地址:https://www.cnblogs.com/nanao/p/15238336.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 基于cobbler 实现自动安装linux系统
- Polysh命令实现多日志查询的方法示例
- linux中启动tomcat后浏览器无法访问的解决方法
- Linux查看系统配置常用命令详解
- LNMP下提示File not found问题的解决方法
- Linux 配置SSH免密登录 “ssh-keygen”的基本用法
- 详解Ubuntu 16.04 pycharm设置桌面快捷启动方式
- Linux 7.4上安装配置Oracle 11.2.0.4图文教程
- linux磁盘管理软RAID的实现原理分析和方法分享
- Centos7下Samba服务器配置(实战)
- Linux系统中创建SSH服务器别名的两种方法
- Linux下卸载MySQL8.0版本的操作方法
- Linux服务器上安装Python3的两种方式
- Centos7安装ElasticSearch 6.4.1入门教程详解
- Windows 和 Linux 上Redis的安装守护进程配置方法