表单

表单

》经常用的登录注册或搜索引擎等功能，我们需要填写信息，点击确认，一旦确认之后这些信息会被发送到另一台电脑进行验证，这电脑即服务器
》登录、注册就是在和服务器交互
》需要和服务器交互的页面，都需要表单实现
》form就是表单
》表单元素：输入框或按钮
》文本框、密码框、单选框、下拉框
》表单标签
<form action="" method="">
》action:所有表单信息提交的一个目的位置
》method:信息提交的方式，get/post
》表单常用元素：
1、文本框：<input type="text" name="uname">
》明文
》type:输入框的类型
》name:当前输入框的名称，一般自定义，英文或缩写，方便服务器识别输入信息
》value:显示值。无需设置，真正提交给服务器的值
》size:文本框大小
》placeholder:提示信息

2、密码框：<input tyoe="password" name="pwd">
》密文，所有内容黑点代替
3、单选框：<input type="radio" name="sex" value="boy" checked> 男<input type="radio" name="sex" value="girl"> 女 <br>
》要使用相同name属性值控制只能选一个
》checked设置默认选中
4、复选框：
爱好： <input type="checkbox" name="hobby" value="read" checked> 读书
<input type="checkbox" name="hobby" value="game"> 游戏
<input type="checkbox" name="hobby" value="movie"> 电影 <br>
》一般设置相同name值，方便服务器识别输入信息
》value真正提交的值
》checked设置默认选中
5、下拉框
住址： <select name="address">
<option value="山东"> 山东</option>
<option value="江苏" selected> 江苏</option>
<option value="浙江"> 浙江</option>
</select> <br>
》option代表各个选项
》selected设置默认选中
》option的value值是真正提交到服务器的值
6、按钮
1）提交按钮<input type="submit" value="注册">
》提交到服务器
》必须放在form表单里使用
》value设置显示文本
2）重置按钮<input type="reset" value="重置">
》清空表单信息
》必须放在form表单里使用
3）图片提交按钮 <input type="image" src="huipu.jpg">
》作用同提交按钮
4）普通按钮
》本身无任何点击动作，需添加onclick事件
》用在表单里外功能一样
5）button按钮 <button>按钮文字</button>
》若在form表单内，无需添加onclick
》若在表单外，相当于普通按钮，需添加onclick事件


7、其他表单元素
出生日期：<input type="date" name="bdate"> <br>
邮箱：<input type="email" name="email"> <br>
数字：<input type="number" name="num"> <br>
颜色：<input type="color" name="color"> <br>
8、文件域标签
文件域 : <input type="file" name="file"> <br>
9、文本域
文本域： <textarea name="descrip" id="" cols="100" rows="20"></textarea> <br>
》用来填写大段文字
》clos设置宽度
》rows设置高度

10、高级用法
1）隐藏域 <input type="hidden" name="id" value="12345">
》信息需要提交服务器，不想让用户看到
2）只读 <input name="tex" value="我不能被修改" readonly>
》文字只能看不能改
3）设置不可用 <button disabled>按钮文字</button>
》按钮置灰，无法点击
11、特殊符号
》空格 &nbsp;
》大于 &gt;
》小于 &lt;
》引号 &quot;
》版权符号 &copy;