表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!-- 表单标签 form 其有几个属性 action（提交地址） method（get post提交方式） enctype（编码方式）一般采用默认就可以了 target（指定目标窗口打开方式 和 a 标签用法一致） -->
<!-- 表单name 为了防止页面中出现多个表单导致提交后后台程序出现混乱的问题 通过name属性来给表单进行命名 -->
<form name="login" action="xiaohuang.com" method="post" target="_self"><!-- 表单名称不能有特殊字符和空格 -->
<!-- 主要有四个标签需要记忆使用 input(单标签) textarea select option -->
<!-- input 一些常用type属性 -->
<!--
text 文本框
password 密码框
button 普通按钮 submit 提交按钮
reset 重置按钮
iamge 图片形式的按钮
radio 单选按钮
checkbox 复选框
hidden 隐藏字段
file 文件上传
-->
<!-- value 默认值 size 文本框长度10 maxlenght 最大输入字符10 -->
用户名：<input type="text" name="登录账号" value="请输入用户名"><br />
姓 名：<input type="text" name="姓名" value="请输入姓名" maxlength="4" /><br />
性 别：
<!-- 对于radio来说 name值相同 代表选项只可选择一个 单选 -->
男：<input type="radio" name="性别" checked="checked" />
女：<input type="radio" name="性别" /><br />
年 龄：<input type="text" name="年龄" value="18"><br />
爱 好：
<!-- 复选框是可以多个同时选择的 并且没有文本 -->
<!-- lable 标签给复选框添加文本描述 并且lable标签中for指向复选框的id
和a标签的锚点定位相似
-->
<!-- checked="checked"属性 代表默认选中 也就是复选框初始状态 -->
<!-- 注意：复选框checkbox必须和label标签配合使用 -->
<input type="checkbox" id="hg" checked="checked" /><label for="hg">火锅</label>
<input type="checkbox" id="lx" /><label for="lx">旅行</label>
<input type="checkbox" id="sy" /><label for="sy">摄影</label>
<input type="checkbox" id="yy" checked="checked" /><label for="yy">音乐</label>
<input type="checkbox" id="lq" checked="checked" /><label for="lq">篮球</label>
<input type="checkbox" id="yy" /><label for="yy">游泳</label><br />
密 码：<input type="password" name="密码" /><br />
密 码：<input type="password" name="确认密码" /><br />
<!-- 表单按钮是无法插入其它内容 -->
<input type="button" value="注册" onclick="alert('注册')" />
<input type="submit" value="提交" onclick="alert('提交')" />
<!-- 针对form表单内的元素有效 -->
<input type="reset" value="重置" />
<!-- 普通按钮：一般与js脚本结合在一起来实现一些特效 -->
<!-- 提交按钮：主要是把当前表单数据提交到服务器处理 -->
<!-- 重置按钮：清除当前表单中所有输入的信息 也就是初始化状态 -->
<!-- 图片按钮 src="相对或绝对路径" -->
<input type="image" src="../img/sina.png" />
<!-- 隐藏域 预览页面是不显示的 不过可以通过源码看到 -->
<!-- 主要作用传递一些隐藏数据给服务器 不让用户看见 -->
<!-- 一般不要使用隐藏域传递敏感信息 密码 手机号 年龄（haha）等 -->
<input type="hidden" value="隐藏" ><br />
<!-- 文件域 可以提交文件 图片 视频 文本文件等 -->
<!-- 如果表单中需要传递文件 编码方式需要修改为 enctype="multipart/form-data" -->
<input type="file"><br />
<!-- 文本域 rowspan 行数 colspan 列数-->
<textarea>简介</textarea><br />
<textarea rows="8" cols="10">简介</textarea>
<!-- 下拉列表 -->
<!-- select 属性 multiple选择多项 size 下拉框显示几行-->
<!-- selected 默认选中 -->
<select>
<!-- <select multiple="multiple" size="3"> -->
<option>上海</option>
<option value="北京" selected="selected">北京</option>
<option>广州</option>
<option>深圳</option>
<option>郑州</option>
<option>安徽</option>
</select>
</form>
<!-- button标签可以插入文本 图片等内容 表单中的button按钮不能插入内容 -->
<button>button标签</button>
<button><img src="../img/android.png"></button>
</body>
</html>
- 表单标签 form 其有几个属性 action（提交地址） method（get post提交方式）enctype（编码方式）一般采用默认就可以了 target（指定目标窗口打开方式 和 a 标签用法一致）
- 表单name 为了防止页面中出现多个表单导致提交后后台程序出现混乱的问题 通过name属性来给表单进行命名
- 表单名称不能有特殊字符和空格
- 主要有四个标签需要记忆使用 input(单标签) textarea select option
- input 一些常用type属性
text 文本框
password 密码框
button 普通按钮 submit 提交按钮
reset 重置按钮
iamge 图片形式的按钮
radio 单选按钮
checkbox 复选框
hidden 隐藏字段
file 文件上传
- 复选框是可以多个同时选择的 并且没有文本
lable 标签给复选框添加文本描述 并且lable标签中for指向复选框的id和a标签的锚点定位相似
checked="checked"属性 代表默认选中 也就是复选框初始状态
注意：复选框checkbox必须和label标签配合使用
- file 文件域 可以提交文件 图片 视频 文本文件等 如果表单中需要传递文件 编码方式需要修改为 enctype="multipart/form-data"
- textarea文本域 属性rowspan 行数 colspan 列数
- 下拉列表 select 属性 multiple选择多项 size 下拉框显示几行 属性selected 默认选中
- button标签可以插入文本 图片等内容 表单中的button按钮不能插入内容
普通按钮：一般与js脚本结合在一起来实现一些特效
提交按钮：主要是把当前表单数据提交到服务器处理
重置按钮：清除当前表单中所有输入的信息 也就是初始化状态
网友评论