作为本人《HTML5》专栏的最后一篇博文,也是我们HTML语言学习的重中之重,希望同学们在这里打起精神,认真去看本片博文的内容
那么,现在就是我们这一块知识点的核心知识了——表单:
我们还是通过对代码的注释来讲解这里的知识点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action:表单提交的位置:可以是一个网站,也可以是一个请求处理的地址
method:post,get提交方式
get方式提交:我们可以看到提交的信息,不安全、高效
post方式提交:比较安全、传输大文件
-->
<form action="1.MyFirstHtml.html" method="post">
<!--文本输入框:
input type="text"
value:初始值
maxlength:最长能写几个字符(注意:这里的字符数,不分中英文)
size:文本框长度(单位是 像素)
readonly:只读、不可改
disabled:该按钮不可选
hidden:隐藏该区域(仅不可视、不可输入,但是是真实存在的)
required:不可为空,否则无法提交
-->
<p>名字:<input type="text" name="username" placeholder="请输入用户名" id="mark" required></p>
<!--密码框:input type="password"-->
<p>密码:<input type="password" name="pwd" placeholder="请输入密码"></p>
<p>特长:<input type="specialty" name="pwd" hidden></p>
<p>爱好:<input type="specialty" name="pwd" value="单推右转哥" readonly></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示单选的分组
-->
<p>性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
<input type="radio" value="boy" name="sex" disabled>机器人
</p>
<!--多选框
input type=checkbox"
-->
<p>爱好:
<input type="checkbox" value="view cartoon" name="hobby">看《革命机》
<input type="checkbox" value="caixvkun" name="hobby" checked>基尼胎没
<input type="checkbox" value="shadiao" name="hobby">学生证变
<input type="checkbox" value="zhizhang" name="hobby">草根武装
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮(不能重置我们代码自动赋初值的文本框内容)
checked:默认选中
-->
<p>按钮:
<input type="button" name="btn" value="点击按钮,关注右转哥!">
<input type="image" src="../resources/image/BingoGirl.jpg">
</p>
<p>学习右转哥的博文后,你想...
<!--下拉框,列表框-->
<select name="列表名称">
<option value="giveALike">点赞</option>
<option value="focusOn" checked>关注</option>
<option value="comments">评论</option>
<option value="forwarding">转发</option>
</select>
</p>
<!--文本域
cols="" 设置列宽
rows="" 设置行高
-->
<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="satisfaction" max="100" min="0" step="5">
</p>
<!--滑块-->投币数量:
<input type="range" name="number" min="0" max="5" step="1">
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<!--增强鼠标可用性
label:点击label修饰的区域,则跳转到for内的标记的id声明的区域
-->
<label for="mark">点击修改用户名</label>
</p>
<p>自定义手机号码:
<input type="text" name="diymail" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
我们现在来观看下显示结果:
HTML5 表单展示
因为录屏还是无法录制弹出的页面,所以本人将弹出的页面截图展示:
那么,作为本人《HTML5》专栏的最后一篇博文,看到这里的同学也就意味着已经学习完了所有有关HTML5的基本内容,那么,本人在现阶段(近2年内)对于前端的学习,也就在这里完结了。
若是对本专栏博文有疑问、意见或建议 的,请在下方评论区提出,本人将尽早予以答复,谢谢