码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记 域元素 第四节 (原创)

时间:2017-09-10 01:12:15      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:title   googl   点击   value   tle   学习   --   readonly   textarea   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--form表单-->
<form>
用户名:
<!--文本域-->
<input type="text">
<br/>
密码:
<!--密码域-->
<input type="password">
昵称:<input placeholder="绰号"/>
<!--隐藏域-->
<br/>
你喜欢的水果有?
<!--checked设置初始为选中状态-->
<br/>
<input type="checkbox" checked="true">苹果
<input type="checkbox" checked="true">黄瓜
<input type="checkbox" checked="true">香蕉
<br/>
请选择性别
<!--单选框以后标记的选中状态为准-->
<input type="radio" name="sex" checked="true">男
<input type="radio" name="sex" checked="true">女
<br/>
<!--下拉列表-->
请选择你要的网站
<!-- 下拉选项框 -->
<!-- multiple是设置下拉菜单是否有滚动条 -->
<!-- option是具体的选项 -->
<select name="123" id="234">
<option value="1">www.baidu.com</option>
<option value="2">www.google.com</option>
<option value="3">www.qq.com</option>
</select>
<br/>
<select name="123" id="254"multiple="true">
<option value="1">www.baidu.com</option>
<option value="2">www.google.com</option>
<option value="3">www.qq.com</option>
<option value="3">www.qq.com</option>
<option value="3">www.qq.com</option>
<option value="3">www.qq.com</option>
<option value="3">www.qq.com</option>
</select>
<br/>
按钮
<input type="button" value="按钮">
<input type="submit" value="确定">
<input type="reset">
<!--重置-->
<input type="file">
<!--文件-->
</form>

<textarea name="333" id="222" cols="20" rows="10">请填写个人信息</textarea>
<!--可以拖拽的文本域-->
<!-- 文本域展示 rows是现实多少行 cols是现实多少列 readonly是设置只读不能写入-->
<textarea rows="10" cols="70" readonly>请填写信息</textarea>
<input type="radio" name="people" id="goodpeople"/>
<label for="goodpeople">好人</label>
<input type="radio" name="people" id="badpeople"/>
<label for="badpeople">坏人</label>
<br/><br/><br/><br/>
<!--鼠标放到字上面就可以点击-->

<!-- 控件分组展示 field是域的意思,set是集合的意思 -->
<fieldset>
<legend>地址信息</legend>
姓名:<input/> <br/>
密码:<input type="password"/>
</fieldset>
</body>
</html>

HTML学习笔记 域元素 第四节 (原创)

标签:title   googl   点击   value   tle   学习   --   readonly   textarea   

原文地址:http://www.cnblogs.com/ttzzyy/p/7499867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!