HTML--学习内容（1）

最新推荐文章于 2024-08-23 09:47:36 发布

小海鸥

最新推荐文章于 2024-08-23 09:47:36 发布

阅读量281

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_68485297/article/details/123663808

版权

本文详细介绍了HTML中的表单元素，包括文本输入框、密码框、单选框、复选框、列表框、多行文本域、提交按钮、重置按钮、图片按钮和普通按钮等，并提供了相应的属性说明和实例代码。通过实例，读者可以更好地理解和应用这些表单元素。

摘要由CSDN通过智能技术生成

表单用`<from>`标签页来使用

<form action="提交地址" method="get/post"

action:表单提交的位置
methed: post/get提交方式
- get方式提交:我们可以在页面中看到我们提交的信息，不安全
- post:比较安全，传输大文件。

文本输入框

<input type=“text”>
value=“值” , 默认初始值,可更改
maxlength= 字符的长度
size=“大小” , 文本框的长度
name=名称

密码框

<input type=“password”>
value=“值” , 默认初始值,可更改
maxlength= 字符的长度
size=“大小” , 文本框的长度
name=名称

单选框

多选一

<input type="radio">
radio=单选按钮
value=英文
name=名字要填写一样
checked=默认选中的值

复选输入框

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

<input type=“checkbox”>
value=英文
name=名称可不同，但最好一致
checked=默认选项

列表框

<select name=" " size=" " >
<option value=" "></option>
name=名称
value=英文
selected=默认选项

多行文本域

<textarea name="名称" cols="列" rows="行"
name=名称
cols=列数，宽度
rows=行数，高度

提交按钮

具有提交功能

<input type="submit" >

重置按钮

点击重置按钮，所有信息将被清空

<input type="reset" >

图片按钮

具有提交功能

<input type="image" src="图片地址">

普通按钮

没有提交功能

<input type="botton" >

文件域

上传文件

<input type="file" name="echo" >

作业

<!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>
    <div>
        <div>
            <img src="./素材/image/renren_titile.gif">
        </div>
        <div>
         <p>人人网，中国<strong>最真实，最有效</strong>的社会平台，加入<br>
            人人网，找回老朋友，结交新朋友。
         </p>
        </div>
    </div>
    <div>
        <form method="get">
            <p>
                电子邮箱：<input type="text" name="Emali" maxlength="50">
            </p>
            <p>
                设置密码：<input type="password" name="mima" maxlength="60">
            </p>
            <p>
                真实姓名：<input type="text" name="Name"  maxlength="8">
            </p>
            <p>
                性别：<input type="radio" name="zhang" value="man" checked>男
                     <input type="radio" name="zhang" value="woman" >女
            </p>
                <select name="birthday" >
                    <option  value="sy">1991</option>
                    <option  value="se">1992</option>
                    <option  value="shi">1993</option>
                </select>
                <select name="birthday" >
                    <option value="ten">10</option>
                    <option value="eleven" selected>11</option>
                    <option value="twelve">12</option>
                </select>
                <select name="birthday" >
                    <option value="thirty">30</option>
                    <option value="thirty-one">31</option>
                    <option value="ten">10</option>
                </select>
            </p>
            <p>
                为什么要填写我的生日？
            </p>
            <p>
                我现在： 
                <select name="sf" >
                    <option value="sf">请选择身份</option>
                    <option value="sf">团员</option>
                    <option value="sf">党员</option>
                </select>
                （非常重要）
            </p>
            <p>
                <input type="image" src="./素材/image/renren_code.gif">
                <a href="*">看不清换一张</a>
            </p>
            <p>
                验证：<input type="text" name="yzm" maxlength="5">
            </p>
            <p>
                <input type="image" src="./素材/image/renren.gif" name="anniu">
            </p>
        </form>
    </div>
    </div>
</body>

</html>

小海鸥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML--学习内容（1）

目录表单用标签页来使用文本输入框密码框表单用<from>标签页来使用<form action="提交地址" method="get/post"action:表单提交的位置 methed: post/get提交方式 get方式提交:我们可以在页面中看到我们提交的信息，不安全 post:比较安全，传输大文件。文本输入框<input type=“text”> value=“值” , 默认初始值,可更改 maxlength=字符的长度.
复制链接

扫一扫