HTML学习笔记(表单)

最新推荐文章于 2024-08-07 14:19:47 发布

Re_Dreamer

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量590

点赞数 1

分类专栏：网页前端之路文章标签： html 前端

本文链接：https://blog.csdn.net/kedat/article/details/121417136

版权

网页前端之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.表单的组成

分为表单域，表单控件(即元素)，提示信息

*表单域

<!DOCTYPE html> 
<html>
    <head>
        <title>表单</title>
    </head>
    <body>
        <form action="url地址" method="提交方式(get/post)" name="表单域名称">
            表单元素控件
        </form>
    </body>
</html>

*表单元素

1.input输入表单元素：

<input type="属性值(如文本字段，复选框，掩码后的文本控件，单选按钮)"/>

<input/>为单标签

type属性值不同，控件类型不同

<!DOCTYPE html> 
<html>
    <head>
        <title>表单</title>
    </head>
    <body>
        <form action="url地址" method="提交方式(get/post)" name="表单域名称">
            <input type="属性值(如文本字段，复选框，掩码后的文本控件，单选按钮)"/><br/>
            <!-- 上传文件 -->
            上传信息： <input type="file" ><br/>
            <!-- 文本输入 -->
            用户名:<input type="text" name="user" value="用户名" maxlength="6"/><br/>
            <!-- 密码可以选择是否可见 -->
            密码:  <input type="password" name="pasw" maxlength="11"/><br/>
            <!-- 单选框 -->
            <!-- 多选一实现需要下列元素具有相同name -->
            性别:  男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex"/><br/>
            <!-- 复选框 -->
            爱好:  吃饭 <input type="checkbox" checked="checked"/>睡觉 <input type="checkbox" checked="checked"/>打豆豆 <input type="checkbox" checked="checked"/><br/>
            <!-- 普通按钮 -->
            <input type="button" value="获取验证码"><br/>
            <!-- 以method提交到action -->
            <!-- 重置表单为初始状态 -->
            <input type="submit" value="注册"/>   <input type="reset" value="重新提交"/><br/>
        </form>
    </body>
</html>

附：<label>标签

绑定一个表单元素，当点击label文本时，自动转为其对应元素上

2.select下拉表单元素:

 <form>
            籍贯：
            <!-- selected="select"默认选中项 -->
            <select>
            <option>北京</option>
            <option selected="select">上海</option>
            <option>江苏</option>
            <option>河南</option>
            <option>河北</option>
            </select>
        </form>

3.textarea文本域表单元素:

 <form>
            备注：
            <br/>
            <textarea rows="3" cols="10">
                无
            </textarea>
        </form>

Re_Dreamer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记(表单)

目录1.表单的组成*表单域*表单元素1.input输入表单元素：2.select下拉表单元素:3.textarea文本域表单元素:1.表单的组成分为表单域，表单控件(即元素)，提示信息*表单域<!DOCTYPE html> <html> <head> <title>表单</title> </head> <body> ..
复制链接

扫一扫

专栏目录