<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>表单</title>
</head>
<body>
<!–1.表单元素，用来申明数据提交范围，只有在此元素内的数据可以提交给服务器–>
<form action=”http://www.tmooc.cn”>
<!– <form></form> 表单意思
– action 表单提交的URL，申明数据提交的目标；
– method 指出表单数据提交的方式；
– enctype 表单数据进行编码的方式；
–>
<!–2.表单控件，用来让用户输入数据；共用12个控件，按照标签分类有2类；
2.1：input元素(9个)，之间用type属性区分
2.2：其他元素(3个)
–>
<p>账号：<input type=”text” value=”tarena” maxlength=”12″ readonly></p>
<!—readonly 只读–>
<p>密码：<input type=”password”></p>
<!– 主要属性
– value属性，由访问者自由输入的任何文本；
– maxlenght属性：限制输入的字符；
– readonly属性：设置文本控件只读；
– name 用于实现分组，一组单选框或者复选框的名称必须相同；
–>
<!–单选–>
<p> 性别：
<input type=”radio” name=”sex” checked/>男<!– checked 设置默认选中–>
<input type=”radio” name=”sex”/>女<!– radio 圆，radion 长方形 –>
</p>
<!–多选–>
<P>
兴趣：
<!– checkbox ：多选
checked： 设置默认选中
–>
<input type=”checkbox” checked/>看书
<input type=”checkbox”/>打篮球
<input type=”checkbox”/>旅游
<input type=”checkbox”/>音乐
</P>
<!–文件筐–>
<p>
头像：<input type=”file” /> <!– file 定义文件选择字段和 “浏览…” 按钮，供文件上传; –>
<input type=”submit” value=”注册”/> <!–提交按钮 ，value 给按钮变更名称–>
<input type=”reset”> <!–重置按钮，把所有表单控件设置为最初默认值–>
<input type=”button”><!–定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本);–>
</p>
<!–隐藏框–>
<p>
<input type=”hidden” value=”asd”/> <!– hidden 定义隐藏输入字段;–>
</p>
<!–其他元素
1.label: 用来管理表单中的文本；
2.select：下来框创建；
3.textarea：定义一个多行的文本输入控件；
–>
<!–1.label: 用来管理表单中的文本,可以将文本与控件绑定在一起，增加了页面点击的受力面积; id 是元素的唯一标识；–>
<p>
<input type=”checkbox” id=”c1″/><!–定义复选框(多选框)–>
<label for=”c1″>已阅读并自愿遵循此协议！</label>
</p>
<!– 2.select： –>
<p>
城市：
<select><!–<select> 元素用来创建下拉列表;–>
<option>请选择城市</option><!–<option> 标签定义下拉列表中的一个选项（一个条目）;–>
<option value=”1″>上海</option>
<option value=”5″>北京</option>
<option value=”3″>广州</option>
<option value=”4″ selected>深圳</option><!–selected属性规定在页面加载时预先选定该选项 –>
<option value=”2″>西安</option>
</select>
</p>
<!–textarea：定义一个多行的文本输入控件；
– cols: 指定文本区域的列数；
– rows: 指定文本区域的行数；
– readonly:只读；
–>
<p>
简洁：<textarea cols=”30″ rows=”5″ readonly>进房间爱房管局加工费健身房圣诞节</textarea>
</p>
</form>
</body>
</html>
原文链接：https://www.cnblogs.com/cainiaobufei/p/10750680.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/32674
