w3cschool菜鸟教程.CHM（腾讯微云）：https://share.weiyun.com/c1FaX6ZD

HTML/CSS学习笔记01【概念介绍、基本标签、表单标签】【day01】

HTML/CSS学习笔记02【表单标签】【day02】

HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】【day02】

第3节表单标签

今日内容

HTML标签_表单标签_概述

HTML标签_表单标签_表单项input1

radio

checkbox

label

HTML标签_表单标签_表单项input2

隐藏域

取色器

HTML标签_表单标签_表单项select

表单代码汇总

HTML标签_案例1_注册页面

第3节表单标签

今日内容

HTML标签：表单标签

CSS

HTML标签_表单标签_概述

* 表单：
* 概念：用于采集用户输入的数据的（用于和服务器进行交互）。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
* 属性：
* action：指定提交数据的URL
* method：指定提交方式
* 分类：一共7种，2种比较常用
* get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
* post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)。
2. 请求参数的大小没有限制。
3. 较为安全。

* 表单项中的数据要想被提交：必须指定其name属性。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>表单标签</title></head><body><form action="#" method="post">用户名：<input type="text" name="username"><br>密码：<input name="password"><br><input type="submit" value="登录"></form></body>
</html>

HTML标签_表单标签_表单项input1

radio

checkbox

label

HTML标签_表单标签_表单项input2

   * 表单项标签：
       * input：可以通过type属性值，改变元素展示的样式
           * type属性：
               * text：文本输入框，默认值
                   * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
               * password：密码输入框
               * radio:单选框
                   * 注意：
                       1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                       2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                       3. checked属性，可以指定默认值
               * checkbox：复选框
                   * 注意：
                       1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。
                       2. checked属性，可以指定默认值。

* file：文件选择框
               * hidden：隐藏域，用于提交一些信息。
               * 按钮：
                   * submit：提交按钮，可以提交表单
                   * button：普通按钮
                   * image：图片提交按钮
                       * src属性指定图片的路径

* label：指定输入项的文字描述信息
           * 注意：
               * label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

隐藏域

取色器

HTML标签_表单标签_表单项select

       * select: 下拉列表
           * 子元素：option，指定列表项

       * textarea：文本域
           * cols：指定列数，每一行有多少个字符
           * rows：默认多少行。

表单代码汇总

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>表单标签</title></head><body><form action="#" method="get"><label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>密码：<input type="password" name="password" placeholder="请输入密码"><br>性别：<input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female" checked> 女<br>爱好：<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>生日：<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>省份：<select name="province"><option value="">--请选择--</option><option value="1">北京</option><option value="2">上海</option><option value="3" selected>陕西</option></select><br>自我描述：<textarea cols="20" rows="5" name="des"></textarea><br><input type="submit" value="登录"><input type="button" value="一个按钮"><br><input type="image" src="img/regbtn.jpg"></form></body>
</html>

HTML标签_案例1_注册页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>注册页面</title></head><body><!--定义表单 form--><form action="#" method="post"><table border="1" align="center" width="500"><tr><td><label for="username">用户名</label></td><td><input type="text" name="username" id="username"></td></tr><tr><td><label for="password">密码</label></td><td><input type="password" name="password" id="password"></td></tr><tr><td><label for="email">Email</label></td><td><input type="email" name="email" id="email"></td></tr><tr><td><label for="name">姓名</label></td><td><input type="text" name="name" id="name"></td></tr><tr><td><label for="tel">手机号</label></td><td><input type="text" name="tel" id="tel"></td></tr><tr><td><label>性别</label></td><td><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td><label for="birthday">出生日期</label></td><td><input type="date" name="birthday" id="birthday"></td></tr><tr><td><label for="checkcode">验证码</label></td><td><input type="text" name="checkcode" id="checkcode"><img src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册"></td></tr></table></form></body>
</html>

加油~~~

HTML/CSS学习笔记02【表单标签】相关推荐

ASP.NET MVC 2 学习笔记二: 表单的灵活提交
ASP.NET MVC 2 学习笔记二: 表单的灵活提交前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...
python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
阿ken的HTML、CSS的学习笔记_表单的应用（笔记七）
欢迎光临你好我是阿ken 文章目录 7.1_认识表单 7.1.1_表单的构成 7.1.2_创建表单 ( < form> 标记 ) 7.2_表单属性 1. action 属性 2. me ...
小白读《锋利的jQuery（第2版）》第五章学习笔记（表单、表格）
表单应用表单3个组成部分表单标签表单域表单按钮单行文本框应用获取和失去焦点改变样式. 示例: HTML <form action="#" method=" ...
HTML学习笔记二--表单及表格的结合使用个人简历制作
部分内容转自:https://www.cnblogs.com/inmeditation/p/12171727.html 一.表格 1.表格标签表格由 <table> 标签来定义.每个表格 ...
H5学习笔记（表单、框架）
表单标签表单用于收集不同类型的用户输入数据 form常用属性 form标签定义表单属性名代码描述 action <form action ="服务器地址">&l ...
前端学习笔记--注册表单
表单在网页中主要负责数据采集功能html中使用form标签完成.表单标签其实是一组标签的组合,不是一个标签.表单元素是允许用户在表单中(比如:输入框.文本域.下拉列表.单选框.复选框等等)输入信息的元 ...
12.6学习笔记 HTML5表单元素/嵌入图片/视频（未完）
12.6学习笔记一. HTML 表单元素(下) 二. HTML5嵌入图片与创建分区响应图三. HTML5嵌入视频一. HTML 表单元素(下) 主要内容: 用input元素获取有规定格式的字符串 ...
Vue学习笔记(六) 表单输入绑定
v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...

HTML/CSS学习笔记02【表单标签】

第3节表单标签

今日内容

HTML标签_表单标签_概述

HTML标签_表单标签_表单项input1

radio

checkbox

label

HTML标签_表单标签_表单项input2

隐藏域

取色器

HTML标签_表单标签_表单项select

表单代码汇总

HTML标签_案例1_注册页面

HTML/CSS学习笔记02【表单标签】相关推荐

最新文章

热门文章

HTML/CSS学习笔记02【表单标签】

第3节 表单标签

今日内容

HTML标签_表单标签_概述

HTML标签_表单标签_表单项input1

radio

checkbox

label

HTML标签_表单标签_表单项input2

隐藏域

取色器

HTML标签_表单标签_表单项select

表单 代码 汇总

HTML标签_案例1_注册页面

HTML/CSS学习笔记02【表单标签】相关推荐

最新文章

热门文章

第3节表单标签

表单代码汇总