HTML5---表单语法学习

最新推荐文章于 2023-07-14 19:00:42 发布
最新推荐文章于 2023-07-14 19:00:42 发布
阅读量251 收藏
点赞数
分类专栏： HTML 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AO_AEO/article/details/106709817
版权

10.表单语法

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post ，get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post：比较安全，可以传输大文件。
-->
<form action="1.我的第一个网页.html" method="post">

<!--    文本输入框<input type="text">-->
<!--
value="AOAEO"   默认初始值
maxlength="8"   最长能写几个字符
size="30"       文本框的长度
-->
    <p>名字：<input type="text" name="username"></p>

<!--    密码框：<input type="password" name="pwd">-->
    <p>密码：<input type="password" name="pwd"></p>

<!--    radio单选框标签，必有value-->
<!--    input type="radio"
        value：单选框的值
        name： 表示组
-->
    <p>性别:
        <input type="radio" value="boy"name="sex"/>男
        <input type="radio" value="girl"name="sex" checked/>女
    </p>
    
<!--    多选框    -->
    <p>爱好：
        <input type="checkbox" value="sleep"name="hobby">睡觉
        <input type="checkbox" value="code"name="hobby" checked>敲代码
        <input type="checkbox" value="chat"name="hobby">聊天
        <input type="checkbox" value="game"name="hobby">游戏
    </p>

<!--    按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset"  重置

-->
    <p>按钮：
        <input type="button"name="btn1"value="点击">
<!--        <input type="image"src="../resources/image/回首.jpg">-->

    </p>

<!--    下拉框，列表框-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="yd">印度</option>


        </select>

    </p>

<!--    文本域
cols="50" rows="10"
-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    
<!--    文件域
input type="file"   name="files"
-->
    <p>
        <input type="file" name="files" >
        <input type="button" value="上传" name="upload">
    </p>

<!--    邮件验证-->
    <p>邮箱：
        <input type="email" name="email" >
    </p>
<!--    url-->
    <p>URL：
        <input type="url" name="url" >
    </p>
<!--    数字-->
    <p>数字：
        <input type="number" name="num" max="100"min="0"step="10">
    </p>

<!--滑块-->
    <p>音量：
        <input type="range"name="voice" min="0"max="100"step="2">
    </p>

<!--搜索框-->
    <p>
        <input type="search" name="search">
    </p>


    
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

10.1表单的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的应用</title>
</head>
<body>

<p>名字：
<!--    只读readonly-->
    <input type="text" name="username" value="admin"readonly>
</p>

<p>密码：
    <input type="password" name="pwd" hidden>

</p>

<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>

<p>
<!--    禁用disabled-->
    <input type="checkbox" name="sex" value="boy"checked disabled/>男
    <input type="checkbox" name="sex" value="girl"/>女
</p>

</body>
</html>
HTML5-表单语法
Wjiahui的博客
01-29 666
HTML5-表单语法
HTML学习-表单语法、表单元素格式、单选框、多选框、按钮 2021-1-19
m0_56661579的博客
01-19 1656
表单语法 表单form action:表单提交的位置，可以是网站，也可以是一个请求处理地址 method:post,get 提交方式 get方式提交：我们可以再url中看到我们提交的信息，不安全，高效 post方式提交：比较安全，传输大文件 文本输入框 input type="text" 密码框：input type="password" submit是提交，reset是重置 此图片是其他作者的，作为自己学习使用 <!DOCTYPE html> <html lang="en">
HTML--表单（转载）
sdsjx01的博客
03-30 142
表单语法 <form method="post"（规定如何发送表单数据 常用值：get|post） action="result.html">（表示向何处发送表单数据） <p> 名字：<input name="name" type="text" > </p> <p> 密码：<input name="p...
表单语法
业精于勤荒于嬉，行成于思毁于随！
01-10 125
规定如何发送表单数据常用值 <form method="post" action="result.html"> <p>名字 <input name="name"type="text"></p> <p>密码 <input name="pass"type="password"></p> <p> <input name="name"type="submit"value="提交">
表单
小兔子乖乖
12-27 325
表单一.表单语法二.表单元素格式三.表单元素1.文本框(text)2.密码框(password)3.单选按钮(radio)4.复选框(checkbox)5.列表框(select)6.按钮(reset,submit,button,image)重置按钮(reset)提交按钮(submit)普通按钮(button)图片按钮(image)7.多行文本域(textarea)8.文件域(file)9.邮箱(email)10.网址(url)11.数字(number)12.滑块(range)13.搜索框(search) 一
表单语法介绍
全世界失眠
07-13 795
form标签【标签格式】...1.action属性设定这个表单在填写完成以后要送给Server上的哪一个程序处理，有可能是CGI程序、ASP程序、PHP程序或是EXE程序。例如：2.method属性设定传送数据的方式，一个是GET，它的运作方式是当用户填完数据送出后，浏览器会将所填入的变量名称及数据加在一个属性所指定的URL之后，依HTTP将数据传送
某马机构----表单和表单控件.rar
09-28
学习HTML表单和控件，不仅需要理解它们的语法和用法，还需要掌握如何处理表单事件，如`onsubmit`、`onchange`等，以及如何使用JavaScript进行表单验证，确保用户输入的有效性。同时，了解CSS对表单元素的样式控制也...
Sergey-s-HTML5-CSS3-Quick-Reference.pdf
01-03
- **初学者**：本书适合作为HTML5与CSS3的学习起点，帮助读者快速上手并掌握基础概念和技术。 - **开发者**：对于有一定经验的Web开发者来说，本书可以作为日常工作的参考资料，提供详尽的技术细节和最佳实践。 - **...
HTML5 基础语法结构与标签应用详解
最新发布
12-23
使用场景及目标：适用于需要创建静态网页或动态网页的基础学习者，帮助读者掌握HTML5的基本语法和常用标签的使用方法，为后续的前端开发打下坚实的基础。 阅读建议：本文档内容丰富，涵盖了HTML5的各个方面，建议...
LearningRailsDepot:学习Ruby-on-Rails-仓库项目表单教程
05-23
5. **表单处理**：在Rails Depot中，你会学到如何创建和使用表单来收集用户输入。Rails提供了便捷的表单辅助方法，可以轻松创建表单元素并处理表单提交。 6. **ActiveRecord模型**：Rails Depot中的商品、购物车、...
表单的基础语法
weixin_71643873的博客
06-29 322
..... 男女使用场景：多个选项最多只能选一个备注：1.多个选项只选其中一项时，每个单选框的name值必须一致2.必须要有v
表单常用语法
weixin_30449239的博客
03-25 154
<!-- 表单 写在body里，就平时上网注册填写的东西--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> ...
表单的语法及属性（form）
m0_72959685的博客
08-30 838
由于用可选值get会有？而用可选值post没有任何的显示，所以用可选值post更加安全，常用于敏感数据的传输。意思是当输入过数字或文字后，浏览器会有个记忆功能，如果设置了可选值on后可以自动填充了。意思是当输入过数字或文字后，浏览器会有个记忆功能，如果设置了可选值off后不自动填充了。get 将表单数据随着action提交的路径以？意思是属性action可以选择表单信息提交的地址。意思是导入或者导出的路径会跳转到当前页面。意思是导入或者导出的路径会跳转到新页面。意思是创建一个form的标签。...
H5学习笔记——form表单
OneKey
03-16 4230
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&
2.表格、表单、js常识总结
宋坚强大大~~
04-21 268
表格、表单、js常识1.表格 - 在网页中可以通过表格来表示一些格式化的数据 - 表格相关的标签 - &lt;table&gt; 用来创建一个表格 - &lt;tr&gt; 表示表格中的一行 - &lt;th&gt; 表示表头中的单元格 - &lt;td&gt; 表示表格中的单元格 - 属性： colspan 横向的合并单元格 rowspan 纵向的合并单元格 - 例子：...
HTML语法之表单控件
chuancyli的博客
03-22 486
表单 作用：表单的作用用来收集信息 组成： 提示信息 表单控件 表单域 表单介绍 属性 action：处理用户数据 method：get post get数据提交 通过地址栏的方式进行数据提交，将用户输入信息显示出来，get提交安全性差 post提交 数据通过后台的方式提交，不会讲用户的信息显示出来，安全性比较好 表单控件 文本输入框 属性 ...
表单的使用详解（超详细）
没有简介
05-04 1497
表单的使用详解
HTML——表单详解
热门推荐
wshwsh_的博客
07-14 2万+
HTML——表单的详细解析
HTML 表单【快速掌握知识点】
久绊A的博客
02-23 205
Html 表单【快速掌握知识点】、表单语法、表单元素格式、文本框、密码框、单选按钮、复选框、列表框、按钮、多行文本域、文件域、网址、数字、滑块、隐藏域、只读和禁用、表单初级验证的方法表单验证的好处？、Placeholder、Required、Pattern
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值