html基础 表单标签 input系列 以及优化方法
场景:在网页中显示手机用户信息的表单效果。 如:登录页、注册页
标签名:input
用法是通过改变type属性值,来展示不同效果
1.1
html 代码
<!--placeholder 提示符又叫占位符-->
昵称: <input type="text" placeholder="用户名" > <br> <!-- 密码框注意事项:type属性值不能拼错或者加空格,否则按普通文本框处理 -->
密码: <input type="password" placeholder='登录密码' > <br> <!-- radio属性里的name是将单选框分组; checked是设置默认选项 -->
性别: <input type="radio" name="sex" checked>男
<input type="radio" name="sex" > 女 <br> 爱好: <input type="checkbox" checked> 敲代码
<input type="checkbox" checked> 文案
<input type="checkbox" > 游戏 <br> <!-- multiple 可以一次选择多个文件上传 -->
<input type="file" multiple >
<!--选择日期,类似日历-->
<input type='date'>
效果图
1.2input系列标签--按钮 ;要想使用重置和提交按钮需要用<form></form> 包裹所有标签内容
<form >
<!--placeholder 提示符又叫占位符-->
昵称: <input type="text" placeholder="用户名" > <br> <!-- 密码框注意事项:type属性值不能拼错或者加空格,否则按普通文本框处理 -->
密码: <input type="password" placeholder='登录密码' > <br> <!-- radio属性里的name是将单选框分组; checked是设置默认选项 -->
性别: <input type="radio" name="sex" checked>男
<input type="radio" name="sex" > 女 <br> 爱好: <input type="checkbox" checked> 敲代码
<input type="checkbox" checked> 文案
<input type="checkbox" > 游戏 <br> <!-- multiple 可以一次选择多个文件上传 -->
<input type="file" multiple > <br> <!-- 按钮 -->
<!-- 提交按钮 -->
<input type="submit" > <!-- 重置按钮 -->
<input type="reset"> <!-- 普通按钮 -->
<input type="button" value="普通按钮">
</form>
效果图
label的的使用方法
功能优化:
当选择自己的爱好以及其他选择答案的时候,点击小方格范围比较小,优化后让其点击文字也可以选择中此项
使用方法一:
爱好: <input type="checkbox" checked id='one'> <label for='one'>敲代码</label>/* 执行过程:当点击"敲代码"文字,label将会找id为one的标签,同时选中*/
<input type="checkbox" checked> 文案
<input type="checkbox" > 游戏 <br>
使用方法二:
<label>
爱好: <input type="checkbox" checked> 敲代码
<input type="checkbox" checked> 文案
<input type="checkbox" > 游戏
</label>
html基础 表单标签 input系列 以及优化方法的更多相关文章
- 课时44.表单标签-input(掌握)
1.什么是表单? 表单是专门用收集用户信息的 2.什么是表单元素? 2.1什么是元素? 在HTML中,标签/标记/元素都是指HTML中的标签 例如: <a>a标签/a标记/a元素 表单元素 ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- HTML之form表单和input系列
<form method="POST" action="/host"> <input class="c1" type=&q ...
- 前端 HTML form表单标签 input标签 type属性 重置按钮 reset
input type="reset" value="重置" reset重置 还原到默认状态 <!DOCTYPE html> <html lan ...
- 前端 HTML form表单标签 input标签 type属性 radio 单选框
<input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...
- 前端 HTML form表单标签 input标签 type属性 checkbox 多选框
多选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- SpringMVC学习系列(11) 之 表单标签
本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...
- SpringMVC学习系列 之 表单标签
http://www.cnblogs.com/liukemng/p/3754211.html 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图 ...
- Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
随机推荐
- size_type 和 size_t 的区别
标准库string里面有个函数size,用来返回字符串中的字符个数,具体用法如下:string st("The expense of spirit\n");cout << ...
- 【Linux】【RedHat】下载 安装 注册
RedHat 下载 安装 注册 记录 因为找入口太麻烦了,所以写了篇博文记录下来大致入口@萌狼蓝天 注册 点击进入注册地址(https://www.redhat.com/wapps/ugc/regis ...
- Rust开发环境搭建和hello world工程
windows10 WSL 打开wsl,执行以下命令 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh 出现安装选项,选择1 ...
- 使用Zabbix + Python对Mysql监控
一.背景介绍 随着公司业务的变迁,公司的开发数据库以mysql为主了.mysql服务器层面的监控,例如CPU.内存.硬盘空间等就用zabbix自带的linux模板即可.数据库层面zabbix也自带了一 ...
- pipeline配置java项目
pipeline { agent { label 'slave' } options { timestamps() disableConcurrentBuilds() buildDiscarder( ...
- Docker 快速删除无用(none)镜像
Dockerfile 代码更新频繁,自然docker build构建同名镜像也频繁的很,产生了众多名为none的无用镜像. 分别执行以下三行可清除 docker ps -a | grep " ...
- UVA10976 分数拆分 Fractions Again?! 题解
Content 给定正整数 \(k\),找到所有的正整数 \(x \geqslant y\),使得 \(\frac{1}{k}=\frac{1}{x}+\frac{1}{y}\). 数据范围:\(0& ...
- 输入npm install 报错npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.13.1 postinstall: `node scripts/build.js`
输入npm install 报以下错误 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.13.1 postinstall: ...
- Windows系统安装ActiveMQ
1.下载安装包:https://activemq.apache.org/components/classic/download/ 选择自己的版本进行下载 2.安装JDK 3.把下载的ActiveMQ压 ...
- 【LeetCode】01 Matrix 解题报告
[LeetCode]01 Matrix 解题报告 标签(空格分隔): LeetCode 题目地址:https://leetcode.com/problems/01-matrix/#/descripti ...