<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<!--
action：定义表单被提交时发生的动作
提交给服务器处理程序的地址
method：定义表单提交数据时的方式
get：默认值，明文提交，所提交的数据可以显示在地址上，安全性低，提交的数据有大小限制，最大为2kb
post：隐式提交，所提交的内容不会显示在地址栏上，安全性高，无大小限制
enctype：编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器
取值：
1.application/x-www-form-urlencoded
默认，允许将普通字符、特殊字符都提交给服务器，不允许提交文件
2.multipart/form-data,允许将文件提交给服务器
3.text/plain 只允许提交普通字符，特殊字符、文件均无法提交
注意：如果有文件需要提交给服务器，method必须为post，enctype必须为multipart/form-data
-->
<div class="form">
<!--form标签是块级元素,被提交-->
<form action="https://www.baidu.com" method="get">
<p>
<!--label标签是行内标签
功能：关联文本与表单元素。点击文本时如同点击表单元素
for属性：表示与该label相关联的表单控件元素的ID值
-->
<label for="user">用户名：</label>
<!--input:
name：控件的名称，服务端用
value：控件的值，即要提交给服务器的数据
disabled：该属性只要出现在标签中，表示的是禁用该控件
-->
<!--text:明文显示用户输入的数据-->
<input type="text" name="username" id="user" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码</label>
<!--密文显示用户输入的数据-->
<input type="password" name="password" id="password" placeholder="请输入密码">
</p>
<p>
<!--radio单选框 checked会默认选中，产生互斥的效果name值要相同-->
用户性别
<input type="radio" name="sex" value="男" checked="">男
<input type="radio" name="sex" value="女">女
</p>
<p>
<!--checkbox复选框 checked默认选中-->
用户的爱好
<input type="checkbox" name="hob" value="说" checked="checked">说
<input type="checkbox" name="hob" value="学">学
<input type="checkbox" name="hob" value="逗">逗
<input type="checkbox" name="hob" value="唱">唱
</p>
<p>
<!--file 上传文件使用-->
<input type="file" name="file" id="file">
</p>
<p>
<!--textarea文本域-->
自我介绍
<textarea name="whoami" id="whoami" cols="30" rows="10" placeholder="请做自我介绍"></textarea>
</p>
<p>
<!--
select下拉列表
select属性：size取值大于1的话则为滚动列表，否则是下拉选项框
multiple设置多选，该属性出现在select中name就允许多选(针对滚动列表)
option属性：value 选项的值
selected 预选中，如果不设置第一项默认选中
-->
<select name="list" id="list" size="2" multiple="">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="深圳">深圳</option>
</select>
</p>
<p>
<!--button仅仅是显示普通的按钮-->
<input type="button" name="but" value="提交" disabled="disabled">
<!--普通按钮，与form表单没有任何关系-->
<button type="button" value="按钮">按钮</button>
<!--submit 功能固定化，负责将表中的表单控件提交给服务器-->
<input type="submit" name="sbt" value="提交">
<!--reset重置按钮-->
<input type="reset">
</p>
</form>
</div>
</body>
</html>
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
