HTML表单

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

qq_45978082

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

阅读量196

点赞数

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

本文链接：https://blog.csdn.net/qq_45978082/article/details/109701722

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML表单

1.form标签定义整体表单区域，。
2. label标签，为表单元素定义文字标注。
3. input标签，定义通用的表单元素。

type属性
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“image” 定义图片作为提交按钮，用src属性定义图片地址
type=“hidden” 定义一个隐藏的表单域，用来存储值

value属性定义表单元素的值
name属性定义表单元素的名称，此名称是提交数据时的键名

textarea标签定义多行文本输入框
select标签定义下拉表单元素
option标签与select标签配合，定义下拉表单元素中的选项

for属性与id属性配合使用，for后面的文字要与id的命名相同，用户点击文字或者相应属性就能选择相关属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>

    <form action="" method="get">

        <p>
         <label for="usename">用户名</label>
         <input type="text" name="usename" id="usename" />
        </p>

        <p>
         <label for="password">密&nbsp;&nbsp;&nbsp;码</label>
         <input type="password" name="password" id="password" />
        </p>

        <p>
         <label>性别</label>
         <input type="radio" name="gender" value="0" id="man" /><label for="man">男</label>
         <input type="radio" name="gender" value="1" id="wuman" /><label for="wuman">女</label>

        </p>

        <p>
            <label>爱好</label>
            <input type="checkbox" name="like" value="study" id="study" /><label for="study">学习</label>
            <input type="checkbox" name="like" value="c++" id="c++" /><label for="c++">c++</label>
            <input type="checkbox" name="like" value="java" id="java" /><label for="java">java</label>
            <input type="checkbox" name="like" value="python" id="python" /><label for="python">python</label>
        </p>

        <p>
            <label>上传图片</label>
            <input type="file" name="" />
        </p>

        <p>

            <label>个人介绍</label>
            <textarea name="Personal introduction"></textarea>

        </p>

        <p>

            <label>籍贯</label>
            <select name="site">

                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>

            </select>
        </p>

        <p>

            <!--<input type="image" src="../img/个人简历.png" width="100" />-->
            <input type="submit" name="" value="提交" />
            <input type="reset" name="" value="重置" />

        </p>

        <p>
            
            <input type="hidden" name="hid01" value="12" />

        </p>

    </form>
    
</body>
</html>

qq_45978082

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单

表单1.from标签定义整体表单区域，。2. label标签，为表单元素定义文字标注。3. input标签，定义通用的表单元素。type属性type=“text” 定义单行文本输入框type=“password” 定义密码输入框type=“radio” 定义单选框type=“checkbox” 定义复选框type=“file” 定义上传文件type=“submit” 定义提交按钮type=“reset” 定义重置按钮type=“image” 定义图片作为提交按钮，用src属性定义图片
复制链接

扫一扫