<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是第四个网页</title>
</head>
<body>
<h1>登录</h1>
<!-- from:表单
常用属性为action:提交表单的位置,路径可以为网页、可以是一个处理请求;
method:提交的请求为get、post方法,其中,get不安全,可以在网页上方链接看到账号密码,post相对安全,在网页上方链接看不到账号信息
-->
<!-- action="../HTML/Day Three.html#kcb"点击确定跳转到的页面 -->
<form action="../HTML/Day Three.html#kcb" method="get" target="_blank">
<!-- 文本输入框 input type="text" -->
<!-- input常用属性:
type:指定元素类型,常用属性为:text(文本)、password(密码)、checkbox(多选框)、radio(单选框)、submit(提交)、
reset(重置)、file(文件)、hidden(隐藏)、image(图片)、button(按钮),默认为text
name:指定表单元素名字
value:指定元素的值,type为radio时必须指定一个值
size:元素初始宽度,当tpe为text或password时,表单大小以字符为大小,其他类型宽度均为像素为单位
maxlength:type为text或password时的最大长度
chencked:type为redio或chenkbox时,指定按钮是否被选定
-->
<p>用户名:<input type="text" name="username" size="30"/></p>
<!-- 密码框 input type="password" -->
<p>密码:<input type="password" name="pwd" size="20"/></p>
<p>邮箱:
<!-- 邮箱带验证,必须包含@ -->
<input type="email" name="email"/>
</p>
<!--
<p>URL:
URL验证,必须http://或https://开头
<input type="url" name="url"/>
</p>
<p>数量:
数字,max最大可输入的数字 min最小可输入的数字 step 每次增加2
<input type="number" name="number" max="100" min="1" step="2"/>
</p>
<p>音量:
音量划块 最大值为100 最小值为0 step每次增加2
<input type="range"name="voice" min="0" max="100" step="2"/>
</p>
<p>搜索:
搜索框 跟text框相比,输入文本之后后面可以一键清除
<input type="search" name="search" />
</p>
-->
<p>性别:
<!-- 单选框 value单选框的的值 单选框需要nane在同一个组下,checked默认选中 -->
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好:
<!-- 多选框 checked默认选中 -->
<input type="checkbox" value="hobby" name="hobby" checked/>听歌
<input type="checkbox" value="hobby" name="hobby" />打游戏
<input type="checkbox" value="hobby" name="hobby"/>看视频
<input type="checkbox" value="hobby" name="hobby"checked/>敲代码
</p>
<p>国家:
<!-- select:下拉框 option:下拉框里边的值 seletes:默认选项-->
<select>
<option value="CN" selected>中国</option>
<option value="US">美国</option>
<option value="JP">日本</option>
<option value="CD">加拿大</option>
</select>
</p>
<p>选择文件:
<!-- 文件域 -->
<input type="file" name="files"/>
<input type="button" value="上传" name="upload"/>
</p>
<p>反馈信息:
<!-- textarea文本域 cols行宽 rows列宽-->
<textarea name="textarea" cols="20" rows="5" >在这里输入文本</textarea>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
结果如下:
更多推荐
【HTML】HTML实现简单表单(不含验证)
发布评论