美文网首页
HTML表单标签

HTML表单标签

作者: 庄周幻梦 | 来源:发表于2020-08-28 17:12 被阅读0次

表单标签

<form action="http://127.0.0.1:5000/" method="get">
    账号:<input type="text" name="username" id="username">
    密码:<input type="password" name="pwd" id="pwd">
</form>

表单所有数据均保存在<form></form>内。
action: 提交的地址
method:请求方式

输入框标签<input>

单行文本输入框 text
账号: <input type="text" name="username" id="username">

name作为提交表单的参数名
id 作为提交表单的唯一标识符

密码输入框
密码: <input type="password" name="password" id="password"><br>
单选框
性别: <input type="radio" name="gender" >男<input type="radio" name="gender" >女<br>
复选框
板块: <input type="checkbox" name="address">IT
    <input type="checkbox" name="address">动漫
    <input type="checkbox" name="address">学习<br>
上传文件按钮
 头像:<input type="file"><br>
按钮
下拉框
    省份:
    <select>
        <option value="广东">广东</option>
        <option value="北京">北京</option>
        <option value="江西">江西</option>
    </select><br>
图片按钮
    图片按钮:<input type="image" src="media/button.jpg"><br>
文本域
    介绍:<textarea cols="30" rows="5"></textarea><br>
重置按钮
    <input type="reset" value="重置">
提交按钮
    <input type="submit" value="提交"><br>
内联框架
    内联框架:<iframe src="https://www.baidu.com" height="500" width="1000"></iframe>
整体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h2>注册</h2>
<form action="http://127.0.0.1:5000/" method="get">
    <label for="username">账号:</label>
    <input type="text" name="username" id="username"><br>
    密码: <input type="password" name="password" id="password"><br>
    性别: <input type="radio" name="gender" >男<input type="radio" name="gender" >女<br>
    板块: <input type="checkbox" name="address">IT
    <input type="checkbox" name="address">动漫
    <input type="checkbox" name="address">学习<br>
    头像:<input type="file"><br>
    按钮:<input type="button" value="这是一个普通按钮"><br>
    省份:
    <select>
        <option value="广东">广东</option>
        <option value="北京">北京</option>
        <option value="江西">江西</option>
    </select><br>
    图片按钮:<input type="image" src="media/button.jpg"><br>
    介绍:<textarea cols="30" rows="5"></textarea><br>
    <input type="hidden" name="token" value="123456789123456789"><br>
    <input type="reset" value="重置">
    <input type="submit" value="提交"><br>

    内联框架:<iframe src="https://www.baidu.com" height="500" width="1000"></iframe>
</form>
</body>
</html>

效果图:


11.jpg

相关文章

  • ## HTML基础-表单标签

    ## HTML基础-表单标签 # form标签(表单) #datalist标签 # select标签 # optg...

  • Day07--HTML

    web概念概述 HTML HTML标签:表单标签

  • HTML笔记--表单标签

    HTML笔记--表单标签 标签(空格分隔): HTML 表单标签(****最重要的一个标签*****) 可以用来实...

  • 22总 HTML和css

    1.表单标签: 1.表单标签:form标签表单标签是用来收集用户信息的...

  • Html 标签

    HTML 案例:旅游网站首页 HTML标签:表单标签

  • 02_html&css

    HTML 表单标签

    form标签属性action:表单提交的路径,可以是html,也可以...

  • HTML5详解

    01-HTML5新增语义化标签 HTML5语义化标签的兼容 HTML5新增表单控件和表单属性 HTML5表单验证反...

  • HTML表单标签

    表单:专门用来搜集用户信息 元素:在HTML中 标签、标记、表单都是指HTML中的标签如: a标签、a标记、a...

  • HTML

    HTML 常用标签: 表单

  • JAVA 之 HTML知识框架

    HTML简介 一. html是什么 二、html基本标签 三、html表单标签(重点) 四、html框架标签及其他

网友评论

      本文标题:HTML表单标签

      本文链接:https://www.haomeiwen.com/subject/dgcjsktx.html