html 列表 表格 form表单 文本域 label

已于 2022-08-25 11:08:28 修改
阅读量864 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： html javascript 前端
于 2022-08-13 22:47:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51986661/article/details/126325242
版权

1.无序列表(常用)

ul li(没有顺序，默认li会有圆点)

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>臭豆腐</li>
        <li>
            <p>圣女果</p>
            <ul>
                <li>123</li>
            </ul>
        </li>
    </ul>
</body>
</html>

2.有序列表(不常用)

ol li(默认li会有数字排序)

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>张三</li>
        <li>张三</li>
        <li>张三</li>
    </ol>
</body>
</html>

3.自定义列表

dl dt dd(dt相当于核心，dd相当于对核心的拆分)

自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>服务支持</dt>
        <dd>售后服务</dd>
        <dd>上门服务</dd>
        <dd>包换服务</dd>
    </dl>
</body>
</html>

4.表格

table caption(表格标题) thead(表头) tbody(身体) tr(列) th(第一行标题单元格) td(单元格)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="10" width="400" hight="120">
      <caption>
        学生成绩单
      </caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>成绩</th>
          <th>评语</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>100</td>
          <td>Fighting</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>100</td>
          <td rowspan="2">加油</td>
        </tr>
        <tr>
          <td>123</td>
          <td>100</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

5.form表单

input中type设置样式，text:‘文本’，password:‘密码框’,radio:‘单选框’,checkbox:‘复选框’

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      昵称: <input type="text" placeholder="请您输入昵称" /> <br />
      密码: <input type="password" placeholder="请您输入密码" /> <br />
      性别: <input type="radio" name="sex" checked /> 男
      <input type="radio" name="sex" /> 女 <br />
      爱好: <input type="checkbox" checked /> 吃饭
      <input type="checkbox" /> 睡觉 <input type="checkbox" /> 打豆豆 <br />
      上传头像: <input type="file" multiple />
      <br />
      <input type="sumbit" />
      <input type="reset" />
      <input type="button" value="普通按钮" />
      <button>1323</button>
    </form>
  </body>
</html>

6.button

    <button type="submit" value="提交所填"></button>
    <button type="reset" value="重置"></button>
    <button type="button" value="按钮"></button>

7.select下拉

select种option设置属性值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select name="" id="">
      <option value="">北京</option>
      <option value="">上海</option>
      <option value="" selected>广东</option>
      <option value="">深圳</option>
    </select>
  </body>
</html>

8.textarea文本域

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea>
  </body>
</html>

9.label标签

设置当点击radio时，也可以通过点击文字实现效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="radio" name="sex" id="female" />
    <label for="female">女</label>
    <input type="radio" name="sex" id="male" />
    <label for="male">男</label>

    婚否
    <label>
        <input type="radio" name="marry" /> 未婚
    </label>
    <label>
        <input type="radio" name="marry" />
        已婚
    </label>
  </body>
</html>

10.综合案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <table border="1" width="600" height="200">
            <h1>就业榜</h1>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>薪资</th>
            <th>就业城市</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1001</td>
            <td>1</td>
            <td>5</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td><a href="#">删除</a></td>
        </tr>
     </table>
</body>
</html>

11.综合案例2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
        <h1>青春不常在，抓紧谈恋爱</h1>
        <hr />
        昵称：<input type="text" placeholder="请输入昵称" /> <br><br>
        性别：<label>
            <input type="radio" name="sex" /> 男
            </label> 
            <label> 
            <input type="radio" name="sex" /> 女
            </label> <br><br>
            所在城市：<select name="" id="">
                     <option value="">北京</option>
                     <option value="" selected>上海</option>
                     <option value="">天津</option>
                     <option value="">广东</option>
                     <option value="">深圳</option>
                     </select>
                     <br><br>
                     婚姻状况: 
                        <label>
                        <input type="radio" name="marry"> 未婚</label> 
                         <label>
                        <input type="radio" name="marry"> 已婚</label> 
                         <label>
                        <input type="radio" name="marry"> 保密</label> 
                        <br><br>
                        喜欢的类型:  <input type="checkbox"> 可爱
                        <input type="checkbox"> 性感
                        <input type="checkbox"> 御姐
                        <input type="checkbox"> 萝莉
                        <input type="checkbox"> 小鲜肉
                        <input type="checkbox"> 大叔
                        <br><br>
                        个人介绍: <br>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                        <h3>我承诺</h3>
                        <ul>
                            <li>年满18岁、单身</li>
                            <li>抱着严肃的态度</li>
                            <li>真诚寻找另一半</li>
                        </ul>
                        <input type="checkbox"> 我同意所有条款
                        <br><br>
                        <input type="submit" value="免费注册"> 
                        <input type="reset">
    
    </form>
  </body>
</html>
你眼里有一条星河照耀着我
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
<学习html>第六天笔记-表单标签（input控件、label标签）
a950809的博客
11-06 2937
<学习html>第六天笔记-表单标签（input控件、label标签）
html表单知识
x0572_的博客
07-25 268
表单元素 表单元素标注 表单属性
HTML表单—文本域
m0_74357768的博客
07-20 316
作用：输入文本的表单控件标签：，双标签。
HTML 基础-16-表单-文本域
weixin_63562705的博客
12-02 828
4.1 textarea文本域标签 ★场景:在网页中提供可输入多行文本的表单控件 ★标签名: textarea ★常见属性: · cols:规定了文本域内可见宽度 · rows:规定了文本域内可见行数 ★注意点: · 右下角可以拖拽改变大小 · 实际开发时针对于样式效果推荐用CSS设置 <body> <textarea cols="60" rows="30"></textarea> </body> ...
表单、文本域、列表框
weixin_30826095的博客
01-31 900
表单的基本结构 <form method="post" action="result.html"> 　　<p> 　　　<input type="submit" name="button" value="提交"> 　　　<input type="reset" name="reset" value="重填"> 　　</p> &lt...
多种实例解析HTML表单form的使用方法
09-28
这里的`rows`和`cols`属性分别定义了文本域的行数和列数，而标签内的文本就是默认显示的内容。 除了文本输入，HTML表单还包含其他类型的控件，如单选按钮(`<input type="radio">`)、复选框(`...
HTML的form表单标签用法学习教程
09-28
3. **文本域** 通过`<input type="text">`创建，用于用户输入文字。可以设置`name`属性来标识输入字段，方便服务器识别数据。例如： ```html ``` 4. **单选按钮** 用`<input type="radio">`创建，通常用于...
JSON生成Form表单的方法示例
12-07
在这个例子中，`config`对象包含了表单的配置，包括输入框、选择器和文本域，每个组件都有其特定的`type`、`dataKey`、`validate`和`style`属性，用于定义组件类型、数据绑定、验证规则和样式。 总结起来，JSON生成...
HTML基础必看---表单,图片热点,网页划区和拼接详解
09-28
3. **文本域**：文本域通过标签创建，允许用户输入多行文本，可以通过cols和rows属性设置文本域的宽度和高度。 4. **隐藏域**：隐藏域使用创建，用于存储不可见的数据，这些数据可以在表单提交时被发送到服务器，但...
Bootstrap表单控件使用方法详解
11-28
除了基本控件，Bootstrap还支持其他表单组件，如下拉菜单(`<select>`)、多选下拉(`<select multiple>`)、文本域(`<textarea>`)以及自定义控件，如按钮组、开关按钮等。此外，还可以使用`.form-control-feedback`图标...
HTML form label
CSDN_Alex_的博客
11-22 127
Form Label <table> define html tables. <caption> define the table title. (automatic centering) <tr> define rows in a table. <th>define header cells within a table. (automatic centering) <td> define columns in a table. <t
HTML表单—label标签
m0_74357768的博客
07-20 1001
文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域。经验：用label标签绑定文字和表单控件的关系，作用：网页中，某个标签的说明文本。增大表单空间的点击范围。
表单文本域和文本区域_全宽文本区域
culuo8053的博客
07-26 941
表单文本域和文本区域Working with textarea widths can be painful if you want the textarea to span 100% width. Why painful? Because if the textarea's containing element has padding, your "width:100%" textarea w...
form表单 +input的属性值+textarea文本域+select下拉菜单
web全栈开发的博客
12-10 2839
&lt;form action="" name="denglu" method="POST"&gt; &lt;!-- 表单的控件input 属性：type 类型 取值： （1）text 文本输入框 （2）password 密码输入框 （3）radio 单选框 如果有...
html表单,表单域
一个半路出家的人
08-21 5463
一,基本的表单标签及属性   input 标签  输入表单 属性:text 定义输入文本        radio定义单选按钮   同组单选按钮 name属性值必须统一 这样才能实现单选,(checked="checked"可以设定初始值)       checkbox  复选框       button普通按钮,可以通过value设定按钮显示名称      submit提交按钮 ...
表单 文本域
colbybobo的博客
01-25 400
表单： &lt;html&gt; &lt;body&gt; &lt;form action="form_action.asp" method="get"&gt; First name: &lt;input type="text" name="fname" /&gt; Last name: &lt;input type="t
HTML-表单label标签，表单区域，按钮标签
最新发布
Kevin7_35Durant的博客
04-28 230
作用：增大控制键的点击范围，比如单选框，多选框，文本框，下拉菜单的点击范围，使它的说明文也被算入点击范围。在性别下面多了个重置按钮 ，整个表单要用form表单区域包裹起来，不然按钮标签无法生效。加上label标签在外观上并没有多大的变化，但会给单选框的名字附上选中空间。双标签：<button type=" "></button>双标签：<label></label>
Html: 表单、文本域、单选按钮
小白兔的窝
01-07 4137
JS命名规则 var aPerson = []; // Array数组 var oBtn = document.getElementById('btn'); //Object对象 var fnName = function () {}; // function函数 var sName = "w3cplus"; // string字符串 文本域 如果我没记错，应该是text是一个文
HTML 基础-17-表单-label标签
weixin_63562705的博客
12-02 229
5.1 label标签 ★场景:常用于绑定内容与表单标签的关系 ★标签名: label ★使用方法①: 1.使用label标签把内容 (如:文本)包裹起来 2.在表单标签上添加id属性 3.在label标签的for属性中设置对应的id属性值 ★使用方法②: 1.直接使用label标签把内容 (如:文本)和表单标签一起包裹起来 2.需要把label标签的for属性删除即可 <body> 性别： ①<input type="radio" name="sex
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值