场景:在网页中显示手机用户信息的表单效果。 如:登录页、注册页
标签名: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系列 以及优化方法的更多相关文章

  1. 课时44.表单标签-input(掌握)

    1.什么是表单? 表单是专门用收集用户信息的 2.什么是表单元素? 2.1什么是元素? 在HTML中,标签/标记/元素都是指HTML中的标签 例如: <a>a标签/a标记/a元素 表单元素 ...

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

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

  3. HTML之form表单和input系列

    <form method="POST" action="/host"> <input class="c1" type=&q ...

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

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

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

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

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

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

  7. SpringMVC学习系列(11) 之 表单标签

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  8. SpringMVC学习系列 之 表单标签

    http://www.cnblogs.com/liukemng/p/3754211.html 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图 ...

  9. Bootstrap系列 -- 11. 基础表单

    表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...

随机推荐

  1. size_type 和 size_t 的区别

    标准库string里面有个函数size,用来返回字符串中的字符个数,具体用法如下:string st("The expense of spirit\n");cout << ...

  2. 【Linux】【RedHat】下载 安装 注册

    RedHat 下载 安装 注册 记录 因为找入口太麻烦了,所以写了篇博文记录下来大致入口@萌狼蓝天 注册 点击进入注册地址(https://www.redhat.com/wapps/ugc/regis ...

  3. Rust开发环境搭建和hello world工程

    windows10 WSL 打开wsl,执行以下命令 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh 出现安装选项,选择1 ...

  4. 使用Zabbix + Python对Mysql监控

    一.背景介绍 随着公司业务的变迁,公司的开发数据库以mysql为主了.mysql服务器层面的监控,例如CPU.内存.硬盘空间等就用zabbix自带的linux模板即可.数据库层面zabbix也自带了一 ...

  5. pipeline配置java项目

    pipeline { agent { label 'slave' } options { timestamps() disableConcurrentBuilds() buildDiscarder( ...

  6. Docker 快速删除无用(none)镜像

    Dockerfile 代码更新频繁,自然docker build构建同名镜像也频繁的很,产生了众多名为none的无用镜像. 分别执行以下三行可清除 docker ps -a | grep " ...

  7. UVA10976 分数拆分 Fractions Again?! 题解

    Content 给定正整数 \(k\),找到所有的正整数 \(x \geqslant y\),使得 \(\frac{1}{k}=\frac{1}{x}+\frac{1}{y}\). 数据范围:\(0& ...

  8. 输入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: ...

  9. Windows系统安装ActiveMQ

    1.下载安装包:https://activemq.apache.org/components/classic/download/ 选择自己的版本进行下载 2.安装JDK 3.把下载的ActiveMQ压 ...

  10. 【LeetCode】01 Matrix 解题报告

    [LeetCode]01 Matrix 解题报告 标签(空格分隔): LeetCode 题目地址:https://leetcode.com/problems/01-matrix/#/descripti ...