博主信息
choa fan
博文
9
粉丝
0
评论
0
访问量
556
积分:0
P豆:22

表单与表单控件

2021年09月23日 21:44:27阅读数:41博客 / choa fan/ HTML学习笔记

表单

1. input 控件

  1. <input type="属性值" value="这里是要显示的值">

常用属性:

1)type 属性

  • 这个属性通过改变值,可以决定了你属于那种input表单。
  • 比如 type = ‘text’ 就表示 文本框 可以做 用户名, 昵称等。
  • 比如 type = ‘password’ 就是表示密码框 用户输入的内容 是不可见的。
  1. 用户名: <input type="text" />
  2. 密 码:<input type="password" />

2) value属性值

  1. 用户名:<input type="text" name="username" value="请输入用户名">
  • value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。

3)name属性

  1. 用户名:<input type="text" name=“username” />

name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。

  • name属性后面的值,是自己定义的。
  • radio 如果是一组,必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
  1. <input type="radio" name="sex" />
  2. <input type="radio" name="sex" />

4)checked属性

  • 表示默认选中状态。 较常见于 单选按钮和复选按钮。
  1. 性 别:
  2. <input type="radio" name="sex" value="男" checked="checked" />
  3. <input type="radio" name="sex" value="女" />

5)input 属性总结

属性 说明 作用
type 表单类型 用来指定不同的控件类型
value 表单值 表单里面默认显示的文本
name 表单名字 页面中的表单很多,name主要作用就是用于区别不同的表单。
checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

2. label标签

  1. <label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
  1. 第二种用法 for 属性规定 label 与哪个表单元素绑定。
  1. <label for="sex"></label><input type="radio" name="sex" id="sex">

当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面

3. textarea控件(文本域)

  1. <textarea > 文本内容 </textarea>

通过textarea控件可以轻松地创建多行文本输入框,cols=”每行中的字符数” rows=”显示的行数”

文本框和文本域区别

表单 名称 区别 默认值显示 用于场景
input type=”text” 文本框 只能显示一行文本 单标签,通过value显示默认值 用户名、昵称、密码等
textarea 文本域 可以显示多行文本 双标签,默认值写到标签中间 留言板

4. select下拉列表

  1. <select>
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
  5. ...
  6. </select>

注意:

  1. <select> 中至少包含一对 option
  2. 在option 中定义selected =” selected “时,当前项即为默认选中项。

5. form表单域

包含表单元素的区域

  1. <form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>

常用属性:

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式,其取值为get或post。
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单。

HTML5 新增input类型

属性值 说明
type=”email” 限制用户输入必须为Email类型
type=”url” 限制用户输入必须为URl类型
type=”date” 限制用户输入必须为日期类型
type=”time” 限制用户输入必须为时间类型
type=”month” 限制用户输入必须为月类型
type=”week” 限制用户输入必须为周类型
type=”number” 限制用户输入必须为数字类型
type=”tel” 手机号码
type=”search” 搜索框
type=”color” 生成一个颜色选择器

HTML5 新增input属性

属性 说明
request request 表单拥有该属性表示其内容不能为空,必填.
placeholder 提示文本(占位符) 表单的提示信息,存在默认值将不显示
autofocus autofocus 自动聚焦属性,页面加载完成自动聚焦到指定表单
autocomplete off/on 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如autocomplete=” on - 需要放在表单内同时加上name属性 -同时成功提交
multiple multiple 可以多选文件提交
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:总结的很不错,对于预习资料仔细看了,非常的主动学习,学了很多课堂未提及的知识点, 极棒

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • html5教程:本文为大家介绍了html5中新增的属性,具有一定的参考作用,希望能够帮助到大家。
    是用来用户做交流的一个网页,良好的设计能够让网页用户更好的沟通。中常见的元素主要包括:文本输入框、下拉选择框、选按钮、复选按钮、文本域和按钮等。
    本篇文章带大家详解了解一下Bootstrap中的。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    在html中,是一个包含元素的区域,主要用于收集不同类型的用户输入,需要使用标签form来定义;而元素是允许用户在中输入内容的,比如输入标签(input)、文本域(textarea

    2021-05-11

    544

    HTML是一个包含元素的区域,用于搜集不同类型的用户输入;元素是允许用户在中输入信息的元素;使用标签“<form>”定义。
    在HTML中,一个完整的通常由元素(也称为)、提示信息和域3个部分构成。
    jQuery禁止form提交数据的方法:首先用JS写一个函数来return false;然后在from标签用到onsubmit事;最后使用submit函数即可提交事
    本篇文章给大家介绍一下Angular使用ControlValueAccessor实现自定义的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    excel清格的做法:首先使用清H4的公式【=计算!G4】;然后点击计算G4元格,打开名称管理器,自定义公式【=EVALUATE(计算!$H4)】。
    制作的方法:首先使用form标签创建,搭建框架;然后使用input标签创建文本输入框和提交按钮;接着使用select和option标签创建下拉列;最后使用textarea标签创建文本区域即可
    php提交方法:1、使用PHP $_REQUEST收集HTML提交的数据;2、通过$_POST收集提交“method="post"”的HTML后的数据;3、使用$_GET
    layui清除数据的方法:首先创建一个数据;然后实现监听提交;最后通过“$("#addGoodsForm")[0].reset();”清空即可。
    html将居中的方法:首先外面加一个父标签fa;然后加一个类centered,代码为【<div class="fa"><form name="
    excel工作中最小操作元是元格;元格是格中行列的交叉部分,它是组成格的最小位,可拆分或者合并;个数据的输入和修改都是在元格中进行的。
    这篇文章主要介绍了thinkPHP5 ajax提交操作,结合实例形式分析了thinkPHP5的ajax提交操作技巧,并附带说明了提交中的参数传递处理技巧,需要的朋友可以参考下
    php通过隐藏获取到前两个页面url的方法:将上一个url通过post的方法post到别处,代码为【<input type="hidden" name="prevurl
    layui框架:我们只需要在元素上添加lay-verify即可完成对元素的校验。
    php中实现ajax提交form的方法:1、创建一个HTML和PHP文并创建form;2、通过“$.ajax({type: "post",url:"text7.php
    这篇文章主要介绍了PHP Web生成器,结合具体案例形式分析了PHP Web生成器基本功能需求、实现方法操作注意事项,需要的朋友可以参考下。
    bootstrap模态框提交的方法:首先打开相应的代码文;然后直接把form写在模态框的modal-body里;最后设置action提交时要跳转的链接即可。