首页 > 其他分享 >05-列表和表单

05-列表和表单

时间:2023-11-26 18:57:31浏览次数:43  
标签:控件 name 05 标签 表单 列表 属性

typora-copy-images-to: media

第01阶段.前端基础.列表和表单

1. 列表标签(重点)

学习目标

  • 理解
    • 无序列表的应用场景
    • 自定义列表的应用场景
  • 应用
    • 无序列表语法
    • 自定义列表语法

问?

前面我们知道表格一般用于数据展示的,但是网页中还是有很多跟表格类似的布局,如下图~~ 我们用什么做呢?

答:

答案是列表, 那什么是列表? 表格是用来显示数据的,那么列表就是用来布局的。 因为非常整齐和自由

  • 概念:

    容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表

  • 特点:

    列表最大的特点就是 整齐 、整洁、 有序,跟表格类似,但是他可组合自由度会更高。

1.1 无序列表 ul (重点)

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。

脚下留心:

 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
 3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

1.2 有序列表 ol (了解)

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

1.3 自定义列表(理解)

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

用的还可以:

1.4 列表总结

标签名 定义 说明
    无序标签 里面只能包含li 没有顺序,我们以后布局中最常用的列表
      有序标签 里面只能包含li 有顺序, 使用情况较少
      自定义列表 里面有2个兄弟, dt 和 dd

      我们现在还没有学布局,现在只要保证2个点:

      1. 学会什么时候用无序列表, 学会什么时候用自定义列表
      2. 无序列表和自定义列表代码怎么写?
      3. 具体的我们刚才看的布局,等我们学了css 在来全面布局。

      2. 表单标签(掌握)

      目标:

      • 能写出最常用的注册类表单
      • 能说出input表单常见属性

      现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图

      **作用: **

      表单目的是为了收集用户信息。

      在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

      在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

      **表单控件: **

      ​ 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

      提示信息:

      ​ 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

      表单域:

      ​ 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

      2.1 input 控件(重点)

      • 语法:

        <input type="属性值" value="你好">
        
        • input 输入的意思
        • <input />标签为单标签
        • type属性设置不同的属性值用来指定不同的控件类型
        • 除了type属性还有别的属性
      • 常用属性:

      1. type 属性

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

      2. value属性 值

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

      3. name属性

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

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

      • name属性后面的值,是我们自己定义的。

      • radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

      <input type="radio" name="sex"  />男
      <input type="radio" name="sex" />女
      
      • name属性,我们现在用的较少, 但是,当我们学ajax 和后台的时候,是必须的。

      4. checked属性

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

      上面这个,表示就默认选中了 男 这个单选按钮

      5. input 属性小结

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

      2.2 label标签(理解)

      目标:

      label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

      概念:

      label 标签为 input 元素定义标注(标签)。

      作用:

      用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

      如何绑定元素呢?

      1. 第一种用法就是用label直接包括input表单。
      <label> 用户名: <input type="radio" name="usename" value="请输入用户名">   </label>
      

      适合单个表单选择

      1. 第二种用法 for 属性规定 label 与哪个表单元素绑定。
      <label for="sex">男</label>
      <input type="radio" name="sex"  id="sex">
      

      pink老师 一句话说出他们:

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

      2.3 textarea控件(文本域)

      • 语法:
      <textarea >
        文本内容
      </textarea>
      
      • 作用:

        通过textarea控件可以轻松地创建多行文本输入框.

        cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

      文本框和文本域区别

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

      2.4 select下拉列表

      目的:

      如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.

      语法:

      <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
      </select>
      
      • 注意:
      1. <select> 中至少包含一对 option
      2. 在option 中定义selected =" selected "时,当前项即为默认选中项。
      3. 但是我们实际开发会用的比较少

      3. form表单域

      • 收集的用户信息怎么传递给服务器?

        通过form表单域

      • 目的:

        在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

      **语法: **

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

      常用属性:

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

      注意:

      每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。

      2.6 团队约定

      元素属性

      • 元素属性值使用双引号语法
      • 元素属性值可以写上的都写上

      推荐:

      <input type="text" />	
      <input type="radio" name="name" checked="checked" />
      

      不推荐:

      <input type=text  />	
      <input type='text' />	
      <input type="radio" name="name" checked />
      

      4.综合案例(注册页面)

      5. 查文档

      经常查阅文档是一个非常好的学习习惯。

      W3C : http://www.w3school.com.cn/

      MDN: https://developer.mozilla.org/zh-CN/

      6. 总结

      标签:控件,name,05,标签,表单,列表,属性
      From: https://www.cnblogs.com/kxtomato/p/17857695.html

      相关文章

      • 2023-2024-1 20231405《计算机基础与程序设计》第九周学习总结
        2023-2024-120231405《计算机基础与程序设计》第九周学习总结作业信息作业属于哪个课程https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP作业要求在哪里https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP/homework/13009作业的目标自学《计算......
      • AcWing 3305. 作物杂交 (spfa建边变形版本
        package蓝桥杯;importjava.util.Arrays;importjava.util.LinkedList;importjava.util.Queue;importjava.util.Scanner;publicclasslanqiao1443{staticfinalintN=2010,M=2*100010;staticint[]h,e,ne,w,target;staticint[]dist;......
      • [ARC105E] Keep Graph Disconnected
        题目链接好题。如果\(1\)和\(n\)一直联通,开始即结束。如果\(n\mod4=1\),那么\(\frac12x(x+1)+\frac12(n-x)(n-x+1)\)为偶数。如果\(n\mod4=3\),那么\(\frac12x(x+1)+\frac12(n-x)(n-x+1)\)为奇数。这两种情况最后连的边的数量奇偶固定,结合\(m\)的大小可以算出......
      • python 定义固定长度列表
        Python定义固定长度列表的实现步骤在Python中,要定义一个固定长度的列表,可以使用以下步骤来实现。下面的表格展示了具体的步骤和对应的代码:步骤代码说明1size=5定义列表的长度,这里假设长度为5。2fixed_list=[None]*size使用乘法操作符将None元素重复size次......
      • day05 K8S网络组件的深度剖析 (1.10.1 -1.10.3)
        一、K8S网络组件的深度剖析上1、认识FlannelFlannel是专为kubernetes定制的三层网络解决方案,主要用于解决容器的跨主机通信问题优势:kubernetes发行版都可以默认安装Flannel容器安装和配置中小型网络架构首选不需要专用的数据存储劣势:性能损耗高不支持NetworkPolic......
      • Day05 语法
        1.注释单行注释//注释多行注释/*注释*/文档注释/**注释*/2.标识符命名规则(与js规则一样)标识符可以含有字母,数字,下划线_,(*注意此处相较于c语言多出一个符)不能以数字开头不能是java中的保留字和关键字java也采用了unicode编码方式,所以......
      • python 中实现对列表中各元素的个数进行统计
         001、方法1>>>list1=["aa","aa","bb","aa","cc","cc"]##测试列表>>>list1.count("aa")##借助内置函数输出单个元素的次数3>>>s......
      • 创建型设计模式05-抽象工厂模式
        1、抽象工厂模式介绍抽象工厂模式(AbstractFactoryPattern)是一种创建型设计模式,围绕一个超级工厂创建其他工厂,也称作为工厂的工厂(大工厂里的小工厂)。在抽象工厂模式中,接口负责创建一组相关对象的工厂,而不需要显式指定它们的类。这种设计模式能够将客户端与具体的实现分离,从而使得......
      • Day05 Java程序运行机制
        Java程序运行机制编译型解释型如同中国人写了一本书美国人想看编译型就类似把整本书全部翻译成美国人看得懂的书(中文书-->英文书)解释型就类似美国人找了个翻译官翻译一段美国人看一段(说一句解释一句用一下编译一下)程序运行机制源程序(*.java)文件-->Jav......
      • day05
        IDEA使用java中的注释java中的注释有三种单行注释://+文字多行注释:可以注释一段文本/*中间*/文档注释JavaDoc:Java标识符 ......