html表单使用
2015-12-24 14:26
537 查看
1、一般的用户名、密码实现:
<form action="reg_success.html" method="post">
<p>
<label for="name">用户名:</label>
<input type="text" value="jack" maxlength="6" size="10" id="name" name="name" readonly/>
</p>
<p>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd" />
</p>
2、单选框的实现:
<p>
<label for="sex">性别:</label>
<input type="radio" name="sex" id="sex" value="M" checked/>男
<input type="radio" name="sex" id="sex" value="F"/>女
</p>
注:此处使用checked属性是为了默认选择性别为 男。
3、复选框的使用:
(A)显示所有选项的复选框:<p>
<label for="hobby">爱好:</label>
<input type="checkbox" name="hobby" id="hobby" checked value="Movie"/>看电影
<input type="checkbox" name="hobby" id="hobby" value="Music"/>听音乐
<input type="checkbox" name="hobby" id="hobby" value="Sport"/>运动
</p>
(B)下拉菜单选项的复选框:
<p>
<label for="grade">所在年级:</label>
<select multiple="multiple" size="3" id="grade" name="grade">注:此处的size值为显示到页面上的元素值
<option value="1">百杰1部</option>
<option value="2">百杰2部</option>
<option value="3" selected>百杰3部</option>
</select>
</p>
4、使用头像(上传头像):
<p>
<label for="head">头像:</label>
<input type="file" id="head" name="head" />
</p>
5、常用按钮:
<p>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
<input type="image" src="images/btn.jpg" />
</p>
6、常用的表单元素
文本框
单行文本type=text
密码框 type=password
多行文本<textarea>
按钮
提交按钮 type=submit
重置按钮 type=reset
普通按钮 type=button
图片按钮 type=image
复选框 type=checkbox
单选框 type=radio
下拉框 <select>
文件域 type=file
隐藏域 type=hidden
<form action="reg_success.html" method="post">
<p>
<label for="name">用户名:</label>
<input type="text" value="jack" maxlength="6" size="10" id="name" name="name" readonly/>
</p>
<p>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd" />
</p>
2、单选框的实现:
<p>
<label for="sex">性别:</label>
<input type="radio" name="sex" id="sex" value="M" checked/>男
<input type="radio" name="sex" id="sex" value="F"/>女
</p>
注:此处使用checked属性是为了默认选择性别为 男。
3、复选框的使用:
(A)显示所有选项的复选框:<p>
<label for="hobby">爱好:</label>
<input type="checkbox" name="hobby" id="hobby" checked value="Movie"/>看电影
<input type="checkbox" name="hobby" id="hobby" value="Music"/>听音乐
<input type="checkbox" name="hobby" id="hobby" value="Sport"/>运动
</p>
(B)下拉菜单选项的复选框:
<p>
<label for="grade">所在年级:</label>
<select multiple="multiple" size="3" id="grade" name="grade">注:此处的size值为显示到页面上的元素值
<option value="1">百杰1部</option>
<option value="2">百杰2部</option>
<option value="3" selected>百杰3部</option>
</select>
</p>
4、使用头像(上传头像):
<p>
<label for="head">头像:</label>
<input type="file" id="head" name="head" />
</p>
5、常用按钮:
<p>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
<input type="image" src="images/btn.jpg" />
</p>
6、常用的表单元素
文本框
单行文本type=text
密码框 type=password
多行文本<textarea>
按钮
提交按钮 type=submit
重置按钮 type=reset
普通按钮 type=button
图片按钮 type=image
复选框 type=checkbox
单选框 type=radio
下拉框 <select>
文件域 type=file
隐藏域 type=hidden
相关文章推荐
- jqury中html()、text()、val()区别
- HTML的基本框架
- html 反转义
- Beego 字符串转HTML问题
- HTML 5 video 视频标签全属性详解
- 常用HTML字符实体
- html初识1
- HTML本地测试成功后上传博客注意事项
- <学习笔记> html事件(源w3school)
- html canvas[autodyne] image clipping
- html中超链接颜色改变,实际项目可能用到
- 浏览器编辑HTML
- HTML中标签的属性ID与Name的区别!
- html的相关基础元素(二)
- html的相关基础元素(一)
- 实现侧边栏工具(1)使用背景图片方式
- html标签总结
- HTML--表格与表单(练习做注册页面)
- HTML——表单与锚点
- HTML 一分钟编写网页播放器