初学HTML代码笔记3终结篇之列表和表单(pink老师)

最新推荐文章于 2024-06-21 18:13:12 发布

&笨笨

最新推荐文章于 2024-06-21 18:13:12 发布

阅读量258

点赞数

分类专栏： HTML 文章标签： html webview 前端

本文链接：https://blog.csdn.net/weixin_55797477/article/details/121737320

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、代码部分

<!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>表单</title>
</head>

<body>
    <h1>一、表单元素之input </h1>
    <form>
        请输入用户名：
        <input type="text" name="usename" value="请输入用户名" maxlength="6"> <br> 密码：
        <input type="password"><br> 性别：男 <input type="radio" name="sax"> 女 <input type="radio" name="sax"><br>
        <input type="radio" id="nan" name="sax"><label for="nan">男(点文字也可以选)</label>
        <input type="radio" id="女" name="sax"><label for="女">女(点文字也可以选)</label> <br> 爱好：吃饭
        <input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"><br>
        <input type="checkbox" name="默认选项" value="打勾" checked="checked"> 两周内自动登录
        <br>
        <input type="submit" value="免费注册"><br>
        <!-- value修改这里了按钮的名字 -->
        <input type="reset" value="重新填写">
        <input type="button" value="获得验证码"><br> 上传头像：
        <input type="file"><br>


    </form>
    <form>
        <h1>二、表单元素之select </h1>
        籍贯：
        <select><option selected="selected">广东
                </option>
                <option>北京
                </option>
                <option>上海
                </option>
        </select> <br> 对该网站的反馈：
        <textarea>
          我要吐槽：
      </textarea>
    </form>
</body>

</html>

二、笔记部分

一、无序列表ul
<ul> 注：ul里面只能放li标签，其他什么鬼都不行，包括文字
<li>列表项1</li> but li标签里什么都能放 like容器
<li>列表项1</li>
</ul>
无序列表的属性用css设置
二、自定义列表dl
<dl>
<dt>联系我</dt>
<dd>微信</dd>
<dd>QQ</dd>
</dl>
dl是表格框架
dt是表头
dd是dt的弟弟

表单
1.表单应用场景
用于收集用户信息
2.组成：表单域（大框框）、表单元素、提示信息
一、表单域<form>
<form>会把它范围的表单元素提交给服务器
属性：action :指定接受并处理表单数据的服务器程序的url地址
method:指定提交方式 get/post
name:名字

二、表单元素
① <input/>标签用于输入
属性：type属性用于指定不同的控件类型
常见的控件类型：
text:文本框
password:密码框
单选按钮（圆点）：radio（注意必须使被选选项的属性上添加相同的name）
checkbox(方框勾)：可多选
2.name属性和value属性
相同点：用于提供给后台人员使用
（1）name （不写就不能单选）
定义input的名字如
性别：男 <input type="radio" name="sax">
女 <input type="radio" name="sax">
后台显示 sax="男" 表示用户选择了男这个按钮
（id 是给css设置属性的注意区分）
（2）value
规定input的值用户修改值就是修改value，值传递
3.checked属性（单选按钮和复选框）
默认选这个项
4.submit 属性
提交按钮会提交给服务器
5.reset 属性
重置按钮
6.button属性
普通按钮后期搭配js使用
7.file属性
上传文件用的

②<label>标签用绑定一个表单元素，当点击<label>文本</label> 时，
光标就会转到对应的表单元素上，增加用户体验。
<input type="radio" id="nan"><label for="nan"> 男(点文字也可以选) </label>
<input type="radio" id="女"><label for="女"> 女(点文字也可以选) </label>
注意：要使id 和for的内容一样才能成功绑定

③<select>标签（也是要放到form里面的）
下拉列表
在option里写selected=“selected ”表示该项为默认选项
④<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>相亲网注册页面</title>
</head>

<body>
    <h5>青春不常在，抓紧谈恋爱</h5>
    <table width="400">
        <!-- 第一行 -->
        <tr>
            <td>性别</td>
            <td><input type="radio" name="sax" id="nan"><label for="nan">男</label> &nbsp <input type="radio" name="sax" id="nv"> <label for="nv">女</label></td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <form>
                    <select>
                <option selected="selected">请选择年份</option><option>2003年</option><option>2002年</option><option>2001年</option><option>1999年</option><option>1998年</option>
            </select>
                    <select>
                <option selected="selected">请选择月份</option>
                <option>1月</option>
                <option>2月</option>
                <option>3月</option>
                <option>4月</option>
                <option>5月</option>
                <option>6月</option>
                <option>7月</option>
                <option>8月</option>
                <option>9月</option>
                <option>10月</option>
                <option>11月</option>
                <option>12月</option>
            </select> <select>
                <option selected="selected">请选择日</option>
                    <option>1日</option>
                    <option>2日</option><option>3日</option><option>4日</option><option>5日</option><option>6日</option>
            </select>
                </form>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td>
                <form><input type="text"></form>
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <form>
                    <input type="radio" name="hunying" id="hun" checked="checked"><label for="hun">未婚</label><input type="radio" name="hunying" id="yihun"><label for="yihun">已婚</label><input type="radio" name="hunying" id="sang"><label for="sang">丧偶</label></form>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td>
                <form><input type="text" value="幼儿园"></form>
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <form>
                    <input type="checkbox">清纯的 <input type="checkbox">性感的 <input type="checkbox">可爱的 <input type="checkbox">小鲜肉
                </form>
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea></textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">我是会员,立即登录</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>

                <ul>
                    <li>年满18,单身</li>
                    <li>抱着严谨的态度</li>
                    <li>真诚寻找另一半</li>
            </td>
        </tr>
    </table>
</body>

</html>

三篇笔记基本上包括了pink老师HTML的全部内容, 完结撒花...本人也即将开启css的学习,好开心哇哇哇!!!

小白在路上,希望得到您的交流和指点,感谢

&笨笨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初学HTML代码笔记3终结篇之列表和表单(pink老师)

一、代码部分<!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"> <ti
复制链接

扫一扫