您的位置：首页 > Web前端 > HTML5

HTML5(二)

2016-09-14 00:00 113 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>

<!-- 表单分为三个部分
1. form标签 （包含了数据提交的方式method和服务器地址action）
2. 表单域 （输入框等等 采集用户信息的标签）
3. 表单按钮 （提交 复位 等等）
-->

<form method="post" action="http://10.0.8.8/sns/my/register.php">

<!-- 表单域-->
<!--
type -- 用该属性来区分input的类型  text(纯文本输入框标签)  password(表示的是密文输入框) email(邮箱输入框)
name -- 值要与接口文档中接口字段一致
placeholder -- 空白提示语
-->
<input type="text" name="username" placeholder="请输入注册的账号"/><br/>
<input type="password" name="password" placeholder="请输入注册的密码"/><br/>
<input type="email" name="email" placeholder="请输入注册的邮箱"/><br/>

<!-- 表单按钮-->
<!--
type :  submit(提交按钮)  点击提交按钮之后 会将用户信息主动提交给服务器
reset(重置)   会清空输入框的所有内容
button(普通按钮) 如果不绑定事件的话没有任何实际作用

value:  修改input标签显示内容的
e -->
<input type="submit" value="注册"/>
<input type="reset"/>
<input type="button" value="普通按钮"/>

</form>
<form method="post" action="http://10.0.8.8/sns/my/login.php">
<input type="text" name="username" placeholder="请输入用户名"/><br/>
<input type="password" name="password" placeholder="请输入密码"/><br/>
<input type="submit" value="登录"/>
<input type="reset"/>
</form>

<!--其他表单域-->
<form>

<!-- 1.单选按钮 type="radio" -->

<!-- checked 默认选中某一项-->
<p>您的性别是？</p>
<input type="radio" name="sex" checked/><span>男</span>
<input type="radio" name="sex"/><span>女</span>
<input type="radio" name="sex"/><span>未知</span>

<!-- 2. 多选框 type="checkbox"-->
<p>你喜爱的女神有？</p>
<input type="checkbox" name="god"/><span>高圆圆</span>
<input type="checkbox" name="god"/><span>范冰冰</span>
<input type="checkbox" name="god"/><span>林心如</span>

<!-- 3. 下拉菜单-->
<select>
<option>河北省</option>
<option>山东省</option>
<option>河南省</option>
<option>江苏省</option>
<option>浙江省</option>
<option>安徽省</option>
<option>黑龙江省</option>
</select>

<!-- 4. 选择文件 type="file"-->
<input type="file"/>

<!-- 5.选择日期-->
<!--
type="date" 年月日
type="datetime" 年月日 时分
type="time" 时分
type="week" 周数
-->
<input type="date"/>
<input type="datetime"/>
<input type="time"/>
<input type="week"/>

<!-- 6. 选择颜色 type="color"-->
<input type="color"/>

<!-- 7.进度条  type="range"-->
<input type="range" min="0" max="100" value="30"/>

<!-- 8. 设置数字type="number"-->
<input type="number"/>

<!-- 9. 设置URL-->
<input type="URL"/>

<!-- 10. 可以表示图片-->

3ff0
<input type="image" src="../img/icon.png"/>

<input type="submit"/>

</form>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML
相关文章推荐
新的分享
章节导航