概述
HTML概要
本文主要讲解html重点知识点和应用
学习阶梯： 结构化语言–>表现化语言---->行为化语言
表单提交的2种方式
1、post提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的表单</title>
</head>
<body>
<!--
action :表单提交的地址
method:提交的方式：get和post
post和get区别：
post：安全---不显示账号和密码
get：不安全---显示密码和账号
--->
<form action="我的.html" method="post">
<p>
账号：<input type="text" name="username"/>
</p>
<p>
密码:<input type="password" name="pass">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
2、get提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的表单</title>
</head>
<body>
<!--
action :表单提交的地址
method:提交的方式：get和post
post和get区别：
post：安全---不显示账号和密码
get：不安全---显示密码和账号
--->
<form action="我的.html" method="get">
<p>
账号：<input type="text" name="username"/>
</p>
<p>
密码:<input type="password" name="pass">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单的常用元素
</p><!-- typy的类型：
单选框：radio
-->
性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="gir" name="sex"/>女
<!-- typy的类型：
多选框：type="checkbox" -->
<p>
爱好:
<input type="checkbox" value="aa" name="AA">睡觉
<input type="checkbox" value="bb" name="BB">吃饭
<input type="checkbox" value="cc" name="CC">学习
</p>
<!-- input type="button"
input type="image"
-->
<p>
按钮：
<input type="button" value="按钮">
<input type="image" src="../red/img/下载.png">
</p>
<!-- 文件上传--->
<p>
<input type="file" value="files">
<input type="submit" value="上传" name="name">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
表单的应用
隐藏–hidden
密码:<input type="password" name="pass" value="1234" hidden>
结果： hidden隐藏属性
禁用—disabled
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="gir" name="sex"/>女
结果：表单添加disabled（禁用属性）后，无法选择
只读----readonly
<p>
账号：<input type="text" name="username" value="admin" readonly/>
</p>
结果：readonly只读属性添加后，无法置空
滑动----range
<p>
音量：
<input type="range" name="void" maxlength="10" step="1" >
</p>
结果：
搜索框–search
搜索框：
<input type="search" name="search">
结果：
表单的初级验证
提示信息----placeholder
<p>
账号：<input type="text" name="username" value="admin" placeholder="请输入账号"/>
</p>
<p>
密码:<input type="password" name="pass" value="1234" placeholder="请输入密码"/>
</p>
非空判断–required
<p>
账号：<input type="text" name="username" value="admin" placeholder="请输入账号" required/>
</p>
<p>
密码:<input type="password" name="pass" value="1234" placeholder="请输入密码" required/>
</p>
HTML总结
最后
以上就是坚强香水为你收集整理的HTML5重点内容详解全教程的全部内容，希望文章能够帮你解决HTML5重点内容详解全教程所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复