<!-- 下拉框,列表框 -->
<!-- selected默认选择 -->
<p>国家:
<select name="列表名称" >
<option value="China">中国</option>
<option value="US">美国</option>
<option value="eth"selected>瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
文本域
<!-- 文本域
cols:可以显示有多少列
rows:可以显示有多少行
-->
<p>反馈:
<textarea name="textarea" id="" 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-->
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method :post ,get 提交方式;
get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
post方式:比较安全,传输大文件,
get是在uml里面显示表单信息 post则是隐藏
value="基哥好帅" 默认初始值
maxlength="8" 最长能写几个字符
size="8" 文本框的长度
<p>名字: <input type="text" name="username" value="基哥好帅" maxlength="8" size="8" readonly></p>
readonly只读
disabled禁用
hidden 隐藏
-->
<form action="1.我的第一个网页.html" method="get">
<!-- 文本输入框 input type="text"-->
<p>名字: <input type="text" name="username" value="基哥好帅" maxlength="8" size="8" ></p>
<!-- 密码框: input type="password" -->
<p>密码: <input type="password" name="pwd" value="2001" hidden></p>
<!-- 单选框标签 必须要写上value 和相同组名name
input type="radio"
value=单选框的值
name=组
-->
<p>性别
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</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>
<!-- 下拉框,列表框 -->
<!-- selected默认选择 -->
<p>国家:
<select name="列表名称" >
<option value="China">中国</option>
<option value="US">美国</option>
<option value="eth"selected>瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
<!-- 文本域
cols:可以显示有多少列
rows:可以显示有多少行
-->
<p>反馈:
<textarea name="textarea" id="" 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>
<!--数字
step往上加 往下减 按钮
-->
<p>商品数量:
<input type="number" name="number" max="100" min="0" step="1">
</p>
<!-- 滑块 -->
<p>音量
<input type="range" name="voice" min="0" max="100" step="10"/>
</p>
<!-- 搜索框 -->
<p>搜索
<input type="search" name="search">
</p>
<!--增强鼠标可用性
鼠标点击标签,光标立马进入框里
-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p><input type="submit">
<!-- submit提交 -->
<input type="reset"></p>
<!-- reset 重置 -->
<!-- type:checkbox(多选框) radio(单选框) hidden(隐藏的) -->
<!-- value 元素的初始值。type为radio时必须指定一个值 -->
<!-- size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小一字符为单位。对于其他类型,宽度以像素为单位 -->
<!-- checked type为radio或checkbox时,指定按钮是否被选中 -->
<!-- maxlength type为test或password时,输入的最大字符数-->
</form>
</body>
</html>
表单如何实现验证?
<!-- 自定义正则表达式验证
-->
<p>自定义邮箱
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" >
</p>