前端自学第3天

最新推荐文章于 2024-07-12 20:49:16 发布

枭末

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量271

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/Byfsky/article/details/106870651

版权

自学前端（第二天）

3.自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何符号。
语法：
在HTML中，

标签用于定义描述列表，该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。
具体语法如下

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

表单标签

使用表单的目的就是为了收集用户信息。
表单的组成：
在HTML中，一个完整的表单通常由表单域，表单控件和提示信息3个部分组成。

标签作用于定义表单域，以实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器

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

<input>表单元素
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式。

<input type="属性值">

type属性的属性值及其描述如下：
属性值描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox 定义复选框
file 定义输入字段和浏览按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，提交按钮会把表单数据发送到服务器
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其输入文本，默认宽度为20个字符

除type属性外<input>标签还有很多属性，常用属性如下：
属性属性值描述
name 由用户自定义定义input元素的名称
value 由用户自定义规定input元素的值
checked checked 规定此input元素首次加载时被选中
maxlength 正整数规定输入字段中字符的最大长度

<label>标签
<label>标签为input元素定义标注

  <label for="sex">男</label>
    <input type="radio" name="sex" id="sex">

for属性应当与相关元素的id属性相同

<select>表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以用标签控件定义下拉列表。

  <label for="jiguan">籍贯:</label>
    <select id="jiguan">
        <option>山东</option>
        <option>海南</option>
        <option>浙江</option>
        <option>江苏</option>
    </select>

<textarea>表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时应该用<textarea>标签。在表单元素中，<textarea>标签时用于定义多行文本输入的控件。常见于留言板，评论。

<form>
        留言板:<br>
        <textarea cols="30" rows="10"></textarea>    
    </form>

综合案例：表单综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <form action="xx.jsp" method="GET">
        性别:
        <input type="radio" id="man" name="sex"><label for="man"><img src="男.png" width="20">男</label>
        <input type="radio" id="woman" name="sex"><label for="woman"><img src="女.png" width="20">女</label>
        <br>
        生日:
        <select name="date" id="date" value="--请选择年--">
            <option>1995</option>
            <option>1996</option>
            <option>1997</option>
            <option>1998</option>
            <option>1999</option>
            <option>2000</option>
        </select>
        <select name="date" id="date" value="--请选择月--">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
        <select name="date" id="date" value="--请选择日--">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
        <br>
        <label for="area">所在地区:</label>
        <input type="text" id="area">
        <br>
        婚姻状况:
        <input type="radio" id="no"><label for="no">未婚</label>
        <input type="radio" id="die"><label for="die">丧偶</label>
        <input type="radio" id="yes"><label for="yes">已婚</label>
        <br>
        <label for="study">学历:</label>
        <input type="text" value="幼儿园" id="study">
        <br>
        喜欢的类型:
        <input type="checkbox" value="妩媚的" id="wumei"><label for="wumei">妩媚的</label>
        <input type="checkbox" value="可爱的" id="cuty"><label for="cuty">可爱的</label>
        <input type="checkbox" value="小鲜肉" id="xianrou"><label for="xianrou">小鲜肉</label>
        <input type="checkbox" value="老腊肉" id="lao"><label for="lao">老腊肉</label>
        <input type="checkbox" value="都喜欢" id="all"><label for="all">都喜欢</label>
        <br>
        <label for="self">自我介绍:</label>
        <textarea id="self cols="30" rows="3">自我介绍</textarea>
        <br>
        <input type="submit" value="免费注册">
        <br>
        <input type="checkbox" checked>我同意注册条款和会员加入标准
        <br>
        <a href="01表单域.html">我是会员，立即登陆</a>
        <br>
        <h2>我承诺</h2>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
    </form>

</body>
</html>

有不对的地方欢迎大家指出，初学者，还请多海涵~~

枭末

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端自学第3天

自学前端（第二天）3.自定义列表自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何符号。语法：在HTML中，标签用于定义描述列表，该标签会与（定义项目/名字）和（描述每一个项目/名字）一起使用。具体语法如下 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl>表单
复制链接

扫一扫