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

HTML标签学习4

2017-11-30 11:51 399 查看

HTML标签学习4

1.form 表单学习

2.input输入框表单学习

3.按钮表单学习

4.file表单学习

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>

<body>
<!--form 表单域
属性 action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。
-->
<form action="stu07-08table.html" method="get">
<!--fieldset 分组标签-->
<fieldset id="">
<legend>标签学习</legend>
<!--
文本输入框 type="text"
maxlength='10'      限制输入的字符长度
readonly="readonly" 设置为只读状态（不能编辑）
disabled="disabled" 未激活，这个输入没有激活，不能用
name="username"     输入框的名称
value="张三"			输入框的值
-->
<input type="text" name="username" maxlength='10' value="张三" />
</br>

<!--
密码输入框 type="password"
!文本输入框的属性对密码输入框都有效。
-->
<input type="password" name="password" />
</br>

<!--
单选框
同一组中，把name设置为同一个
checked="checked" 设置默认选中
-->
<input type="radio" name="gender" id="" value="0" checked="checked" />男
<input type="radio" name="gender" id="" value="1" />女
</br>

<!--
下拉列表
multiple="multiple"  设置下拉可以多选
selected="selected"  设置下拉默认选中
-->
省：
<select name="">
<option value="0">江西</option>
<option value="1" selected="selected">江苏</option>
<option value="2">广东</option>
</select>
市：
<select name="">
<option value="">南京市</option>
<option value="" selected="selected">苏州市</option>
<option value="">常州市</option>
</select>
区：
<select name="">
<!--下拉信息分组-->
<optgroup label="苏州市">
<option value="">吴中区</option>
<option value="">工业园区</option>
<option value="">相城区</option>
<option value="">新区</option>
</optgroup>
<optgroup label="南京市">
<option value="">吴中区</option>
<option value="">工业园区</option>
<option value="">相城区</option>
<option value="">新区</option>
</optgroup>
</select>
</br>

<!--
多选框
checked="checked" 默认选中
-->
<input type="checkbox" checked="checked" />初中
<input type="checkbox" checked="checked" />高中
<input type="checkbox" checked="checked" />大学
</br>

<!--
多行文本框
cols="150" 控制输入字符长度
rows="10"  控制输入的行数
-->
<textarea cols="150" rows="10"></textarea>
</br>

<!--文件上传控件-->
<input type="file" />
</br>

<!--文件提交按钮（可以实现from提交按钮）-->
<input type="submit" name="" id="" value="提交按钮" />
</br>

<!--普通按钮（不可实现from提交按钮）-->
<input type="button" name="" id="" value="普通按钮" />
</br>

<!--图片按钮（可以实现from提交按钮）-->
<input type="image" src="../../img/1.png" value="图片按钮" />
</br>

<!--重置按钮（将信息重置为初始状态）-->
<input type="reset" value="重置按钮" />
</br>
</fieldset>

</form>
</body>

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