<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单笔记</title>
</head>
<body>
<h1>表单：</h1>
<!-- 表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签：定义整体的表单区域，属性有：
* action属性：定义表单数据提交地址。
* method属性：定义表单提交方式，一般有“get”和“post”。
2、<label>标签：为表单元素定义文字标注。
3、<input>标签：定义通用的表单元素，属性有：
* type属性，定义input的类型：
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框，输入的东西显示效果是暗码的
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="image" 定义图片作为提交按钮，用src属性定义图片地址
- type="hidden" 定义一个隐藏的表单域，用来储存值
* value属性：定义表单元素的值。
* name属性：定义表单元素的名称，此名称是提交数据时的键名。
4、<textarea>标签：定义多行文本输入框。
5、<select>标签：定义下拉表单元素。
6、<option>标签：与<select>标签配合，定义下拉表单元素中的选项。
-->
<!-- form标签声明表单区域 -->
<h1>注册表单：</h1>
<form action="" method=""><!--当你不知道加了action有什么区别的时候，你可以看url-->
<!-- action属性如果不写东西，就算是提交到本页，以后会写后台去接收这些数据的
action属性提交数据是通过控件(input标签)中的name属性，比如用户名那个，name等于键名，username等于值名。
-->
<!--当你不写method属性的时候，表单是默认用get方式提交的，get和post方式的区别就是，
get方式提交数据在url可以看到数据，这样如果用在输入账号密码就很不安全，这时候就需要用post方式了，
post方式提交数据就不会显示在url里面，它是通过http协议里面的报文一起发送给后台。(敏感数据记得要用post方式)
-->
<div>
<label for="username">用户名：</label><!-- 定义输入框前面的标记 -->
<input type="text" name="username" id="username" /><!--定义输入框，type定义输入框的类型-->
<!-- 这里，label标签中的for属性的值，对应着input标签中的id值，我们平时想要输入
的时候是要点input输入框才能输入东西，但是现在添加了这两个属性，就可以点击用户名
这几个字的范围，也可以激活输入框在里面输入东西。
这里就等于点击for属性去激活id属性的东西。
-->
</div>
<br />
<div>
<label>密 码：</label>
<input type="password" name="password" />
</div>
<br />
<div>
<!-- 单选框，写单选框的选项时，input标签的name参数的名字必须是一样的 -->
<label>性 别：</label>
<!-- 像这种单或多选框的，提交数据的时候是显示on的，这个时候我们需要给它加上value属性，
提交的时候就会提交value的值，实操的时候建议value不要弄成中文的，中文不美观。
-->
<input type="radio" name="gender" value="男" id="gen1" /> <label for="gen1">男</label>
<input type="radio" name="gender" value="女" id="gen2" /> <label for="gen2">女</label>
<!-- 因为写了id和for两个属性，这里就可以直接点男或女那个字，也可以激活input的选项。 -->
</div>
<br />
<div>
<!-- 多选框(复选框) -->
<label>爱 好：</label>
<input type="checkbox" name="like" value="学习" /> 学习
<input type="checkbox" name="like" value="python" /> python
<input type="checkbox" name="like" value="前端" /> 前端
<input type="checkbox" name="like" value="美少女" /> 美少女
</div>
<br />
<div>
<!-- 上传文件，什么类型的文件都可以 -->
<label>照 片：</label>
<input type="file" name="" />
</div>
<br />
<div>
<!-- 定义多行文本输入框 -->
<label>个人介绍：</label>
<textarea name="introduce"></textarea>
</div>
<br />
<div>
<label>籍 贯：</label>
<select name="site"><!--声明表单下拉，要配合option标签使用-->
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
</div>
<br />
<div>
<!-- 提交按钮 -->
<input type="submit" name="" value="提交" />
<!-- 如果不喜欢文字按钮做提交，感觉太单调了，这里可以用图片来做提交按钮 -->
<input type="image" src="images/头像.jpg" name="" />
<!-- 用了图片代替按钮提交的话，提交数据后面会出现x=xxx，y=xxx，这个你不用担心，这个是图片按钮的坐标 -->
<!-- 用图片按钮代替文字按钮的话，一般会导致提交两次数据，所以不建议使用这个 -->
<!-- 如果真的想做漂亮点的按钮，可以使用css样式来做 -->
<br />
<!-- 重置按钮 -->
<input type="reset" value="重置">
</div>
<!-- hidden这个是隐藏值，不会出现在页面上，但是提交数据的时候，value的值会一起提交上去 -->
<input type="hidden" name="hid01" value="12" />
</form>
</body>
</html>
04-28
1万+
1万+
07-14
1万+
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
