首页 > 其他分享 >Web前端学习笔记3——列表与表单

Web前端学习笔记3——列表与表单

时间:2022-12-29 20:55:44浏览次数:60  
标签:Web 序列表 标签 无序 列表 表单 type

无序列表

无序列表的标签:<ul></ul>

无序列表列表项的标签:<li></li>

ul标签中只能嵌套li标签,不能存放别的标签或者数字,li标签之中可以存放任何元素和标签

无序列表会默认在每个列表项前面增加一个小点,如下图所示:

 

 

有序列表

有序列表标签:<ol></ol>

有序列表列表项的标签和无序列表相同,都是<li></li>

有序列表的注意事项与无序列表相同

有序列表会默认在每一个列表项前面增加一个排序,如下图:

 

自定义列表

自定义列表标签:<dl></dl>

自定义列表的列表项标签:<dt></dt>   <dd></dd>

dt定义一个项目名,dd紧随其后对其作出解释,一个dt可以对应多个dd

一个dl中也可以有多组的dt和dd

示例:

自定义列表的样式如下图:

 表单

表单通常由表单域,表单控件(表单元素)和提示信息组成,表单通常用来收集用户信息

 

表单域是包含表单元素的一块区域,表单域的标签为<form></form>

form标签的常用属性如下图所示:

 

 

表单控件:

 

输入标签:<input type=""/>

type是input标签必须要有的属性,type里面可以有以下的属性值:

 

 

除了上面的type属性之外,input还有以下常用属性:

 

 

 

 

 

type="radio"或者type="checkbox"时,name的值一般都要相同,只有name值相同的时候,才可以实现多选一,虽然多选不需要name值相同,但是我们一般也会设置一个相同的值

如果要使得按钮初始状态是被选中的,可以加checked属性,即checked="checked"

name和value的值可以传输到后台,让后台收集数据的人知道

具体示例:

 1 <form>
 2             <!-- text文本框 可以输入任何字符 -->
 3             用户名:<input type="text"/><br />
 4             <!-- password密码 可以隐藏输入的字符 -->
 5             密码:<input type="password"/><br />
 6             <!-- radio单选框 可以实现多选一 -->
 7             <!-- 但是要实现多选一,必须使得input的name属性相同 -->
 8             性别:男<input type="radio" name="sex"/>
 9                  女<input type="radio" name="sex"/><br />
10             <!-- checkbox复选框 可以实现多选 -->
11             爱好:打游戏<input type="checkbox" name="hobby"/> 
12             跑步<input type="checkbox" name="hobby"/> 
13             下棋<input type="checkbox" name="hobby"/><br />
14             <!-- file上传文件 实现上传头像等功能-->
15             上传头像:<input type="file"/><br />
16             <!-- submuit提交按钮,可通过设定value值改变按钮提示字 -->
17             <input type="submit" value="提交表单">
18             <!-- reset重置按钮,可通过设定value值改变按钮提示字 -->
19             <input type="reset" value="重新填写">
20             <!-- button是自定义按钮 需要借助JS添加功能 -->
21             <input type="button" value="发送验证码">
22         </form>

效果如下:

 

标签:Web,序列表,标签,无序,列表,表单,type
From: https://www.cnblogs.com/qingyuan0213/p/17013322.html

相关文章

  • JS表单效验
    什么需要表单验证?1.减轻服务器的压力2.保证数据的完整性、有效性表单效验的步骤:1.获取表单元素输入的值2.对表单数据进行判断处理3.使用事件对数据进行提交表单选......
  • 让nginx可以以列表形式显示目录文件
    1、编辑/etc/nginx/nginx.conf,让nginx可以以列表形式显示目录文件。location/{root/mnt/software; #我们需要显示的目录autoinde......
  • SpringBoot - WebMvcConfigurer 配置类
    WebMvcConfigurer:1.publicvoidconfigurePathMatch(PathMatchConfigurerconfigurer)路径匹配规则一般不用修改2.publicvoidconfigureContentNegotiation(ContentNe......
  • pycharm—flask创建简单web项目
    flask创建简单web项目1、系统系统版本OSwin10pycharm专业版2022.3.12、引入flask包pipinstallflask3、项目目录展示、代码、浏览器访问fromf......
  • 5号黯区WEB靶场-注入漏洞-sql server get注入(sa)
    1手工注入1、判断是否有注入。加单引号发现有报错,存在报错注入。http://bug.cc:8201/get.aspx?id=1' and1=1显示正常, and1=2不显示数据,存在布尔型注入。http://b......
  • java 列表迭代器 listIterator
    listIterator:            listIterator和iterator是有区别的,listIterator不会校验实际修改值和预期修改值是否相等,会把实际修改值赋值......
  • Web前端学习笔记2——表格
    表格的基本语法以及标签表格示例1:table标签就是表格的标签,用来建立一个表格tr标签表示行,一个<tr></tr>标签就是一行td标签表示数据单元格的内容,可以理解为列th标签为......
  • .Net6 WebApi使用SqlSugar
    1、Nuget先引入:SqlSugarCore2、NetIOC1、注入ISqlSugarClient.NET自带的IOC使用也很方便 先封装一个操作类  //建一个扩展类publicstaticclassSqlsugarS......
  • vue websockt 实现站内消息的发送和接收
    1.什么是 WebSocketwebsocket是HTML5开始提供的一种网络通信协议,它的目的是在浏览器之间建立一个不受限的双方通信的通道,比如说,服务器可以在任意时刻发送信息给浏览器。......
  • 循环某类型列表,组装类型列表中所有下级名称,展示表格使用
    /***获取数据信息**@paramselectBOS原类型列表*@parami类型下标(从0开始)*@paramname类型拼接名称(拼接后的每行......