<!-- form 标签 action 提交地址 method 提交方式 get 高效 但数据会在url中显示 且传输量小 post 效率较低 但数据不在url中显示 且传输量大 -->
<!--name属性作为提交数据时数据的变量名--> <!--value属性作为填充值(多种意义上)--> <!--单选框/多选框中checked代表默认选中--> <!--下拉框中selected代表默认选中-->
input标签
<!--文本输入框 type="text"--> <!-- maxlength 最长输入值 size 文本框长度 readonly 只读 hidden 隐藏 disabled 禁用 placeholder 提示信息 required 是否必填 pattern 正则表达式验证 -->
<!--单选框 type="radio"--> <!--name属性用于分组 同一组中只有一个选项可被选中-->
<!--多选框 type="checkbox"--> <!--name属性不一致也可被读取 但习惯性写成一致-->
<!--按钮 type="button" 普通按钮 type="image" 图片按钮 type="submit" 提交按钮 type="reset" 重置按钮 -->
<!--文件域 type="file" 用于从计算机上选择文件-->
<!--文本域 type="textarea" cols 列数 rows 行数 标签间文本（文本内容）为默认内容 -->
<!--搜索框 type="search" 自带清除内容按钮-->
<!--验证 type="email"、"url"、"number"等等-->
<!--滑块 type="range" max、min 设置滑块范围 step 设置最小修改值 -->
跳转至输入
<!-- label 标签 for 目标id -->
代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--get方法高效 但数据会在url中显示 且传输量小-->
<!--post方法效率较低 但数据不会再url中显示 可传输大文件-->
<form action="1.第一个网页.html" method="get">
<!--name属性作为提交数据时数据的变量名-->
<!--input标签中value属性作为初始值或按钮上的文字-->
<!--单选框/多选框中checked代表默认选中-->
<!--下拉框中selected代表默认选中-->
<strong>文本输入框</strong>
<!--文本输入框 type="text"-->
<!--
maxlength 最长输入值
size 文本框长度
readonly 只读
hidden 隐藏
disabled 禁用
placeholder 提示信息
required 是否必填
pattern 正则表达式验证
-->
<p>用户名：<input type="text" name="id" maxlength="10" size="100" placeholder="输入用户名"></p>
<p>密码：<input type="password" name="psw"></p>
<strong>单选框</strong>
<!--单选框 type="radio"-->
<!--name属性用于分组 同一组中只有一个选项可被选中-->
<p>性别：
<input type="radio" value="male" name="sex" checked>男
<input type="radio" value="female" name="sex">女
</p>
<strong>多选框</strong>
<!--多选框 type="checkbox"-->
<!--name属性不一致也可被读取 但习惯性写成一致-->
<p>爱好：
<input type="checkbox" value="code" name="hobby" checked>代码
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="read" name="hobby">阅读
</p>
<strong>按钮</strong>
<!--按钮
type="button" 普通按钮
type="image" 图片按钮
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>
<input type="button" value="普通按钮" name="btn">
<input type="image" src="../resources/image/Pyke.jpg" height="100" width="200" alt="Pyke图片按钮" title="图片按钮">
</p>
<strong>文件域</strong>
<!--文件域 type="file" 用于从计算机上选择文件-->
<p>
<input type="file" name="files">
</p>
<strong>文本域</strong>
<!--文本域 type="textarea"
cols 列数
rows 行数
标签间文本（文本内容）为默认内容
-->
<p>反馈
<br/>
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<strong>下拉框</strong>
<!--下拉框-->
<p>国家：
<select name="country">
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="uk">英国</option>
</select>
</p>
<strong>搜索框</strong>
<!--搜索框 type="search" 自带清除内容按钮-->
<p>
<input type="search" name="search" value="搜索框">
</p>
<strong>验证</strong>
<!--验证 type="email"、"url"、"number"等等-->
<p>邮箱：
<input type="email" name="email">
</p>
<p>url：
<input type="url" name="url">
</p>
<p>数字：
<input type="number" name="num" max="100" min="0" step="5">
</p>
<p>......</p>
<strong>滑块</strong>
<!--滑块 type="range"-->
<p>
<input type="range" name="volume" max="100" min="0" step="1">
</p>
<strong>增强鼠标可用性</strong>
<p>
<label for="mark">点我输入内容</label>
<input type="text" id="mark">
</p>
<strong>提交表单</strong>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>运行效果
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
