<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
</style>
</head>
<body>
<!-- 只要表单要提交到服务器，name是必须的 -->
<!--
表单的作用就是用来将用户信息提交给服务器
比如:百度搜索框 注册 登录都需要填写表单
-->
<!--
使用form标签创建表单
form必须制定一个action属性，该属性指向的是一个服务器地址
当我们提交表单时会提交到服务器地址
-->
<form action="26完善clearfix.html">
<!--
使用form创建的仅仅是一个空表单
我们还需要向form中添加不同表单项
-->
<!--
使用input创建文本框，他的type属性是text（单行文本框）
如果希望表单项中数据提交到服务器，还需要给表单项制定一个name属性
用户填写的信息会附在url地址后以查询字符串的形式提交给服务器
样式: url地址?查询字符串
格式: 属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值作为文本框默认显示
-->
<!--
使用fieldset为表单项分组
可以将同一组放到fieldset中
-->
<fieldset>
<!-- 指定组名legenf标签 -->
<legend>用户信息</legend>
<!--
HTML还提供了一个lable标签，用来选中表单中提示文字
该标签可以指定for属性，需要指定一个表单项的ID值
-->
<label for="um">用户名</label>
<input id="um" type="text" name="USENAME" value="在这里填写用户名" style="color: rgba(162, 165, 158, 0.603);"/><br>
<!--
使用input创建密码框，他的type属性是password
-->
<label for="pass">密码</label>
<input id="pass" type="password" name="PASSWORD"/>
</fieldset>
<br>
<!--
单选按钮
-使用input创建单选按钮，他的type属性是radio
-单选按钮通过name属性进行，name属性相同的是一组按钮
（让用户选择的不需要填的必须有value）
还需要指定一个value属性，这样选中表单的value会提交给服务器
如果希望单选和多选默认被选中就添加 checked="checked"属性
-->
<label for="umm">性别</label>
<input id="umm" type="radio" name="gender" value="man"/>男
<input id="umm" type="radio" name="gender" value="woman" checked="checked"/>女
<br><br>
<!--
多选框
-使用input创建单选按钮，他的type属性是checkbox
-->
爱好<input type="checkbox" name="love" value="football"/>足球
<input type="checkbox" name="love" value="basketball"/>篮球
<input type="checkbox" name="love" value="pingpaang"/>乒乓球
<input type="checkbox" name="love" value="badminton"/>羽毛球
<br><br>
<!--
下拉列表
-使用select创建下拉列表
-下拉列表的name属性指定给select，value属性给option
默认选中在option添加 selected="selected"
select中添加属性 multiple="multiple"，变成多选下拉列表
-->
<!-- 在下拉列表中用option创建列表项 -->
你喜欢的数字
<select name="star" >
<!--
在select使用optgroup分组
同一个optgroup中的选项是一组
-->
<optgroup label="大数字">
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</optgroup>
<optgroup label="小数字">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
</select>
<!--
使用textarea创建多行文本框
-->
自我介绍<textarea name="info"></textarea>
<br><br><br>
<!--
提交按钮可以将表单中的信息提交给服务器
使用input创建提交按钮，他的type属性是submit
在提交按钮上可以通过value来指定按钮上的文字
-->
<input type="submit" value="注册"/>
<!-- 重置按钮,点击表单恢复默认 -->
<input type="reset"/>
<!--
使用type="button"可以创建单纯按钮没有功能
结合js用
-->
<input type="button" value="点击"/>
<br><br>
<!--
button也可以创建按钮
用法和input类似，成对出现，更加灵活
-->
<button type="submit">提交2</button>
<button type="reset">重置2</button>
<button type="button">按钮2</button>
</form>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
