表单
页面上的 输入框 按钮 单选 多选 这些可操作或者可编辑的控件
都输入表单元素
表单的作用:就是负责采集用户的信息 作为数据收集
表单里面包含哪些:
表单控件:
输入框 密码框 单选 多选 多行文本 按钮 图片按钮 下拉框...
提示信息:
用来提示用户的一些操作流程的步骤的文字展示
表单域:
form表单标签 所有的表单控件和提示信息都要放到表单域的标签里面
表单域本身可以实现信息数据的收集与提交
表单域(form):
输入框:
<input type="text"> type为text的表示 是输入框
<input type="button"> 表示按钮 value="按钮的文字"
<form action="">
<input type="text">
<br>
<input type="button" value="我是按钮">
</form>form表单域:
action: form表单提交的后台地址
method: 提交方式 get或者post(放到后面知识点去讲)
get方式 表单域不写是默认值
表单域本身能够将数据提交给action所指向的后台地址
表单域里面一旦有提交按钮 那么点击提交按钮时 会把当前表单域的所有数据
提交给action指向的后台地址
<input type="submit"> 提交按钮 value="修改提交按钮的默认文字(提交)"
一旦表单域里面的控件具有name属性 那么的值是自己起的名字
那么当前表单域提交时 就会把当前具有name的控件信息提交给后台
如果是get方式 那么 就会在地址栏体现出来
格式:
action地址?键1=值1&键2=值2&...键n=值n
控件 有name就提交 没有name就不提交
如果是post方式 那么提交的数据不在地址栏(至于在哪 后面去讲)
<form action="http://www.baidu.com">
<input type="text" name="username">
<br>
<input type="text" name="password">
<br>
<input type="submit" value="注册">
</form>常见的表单控件使用:
输入框:
input:type="text"
属性:
value="" 输入框的默认输入内容(以后用户输入的 也是在这里面)
那么name是表单提交时的键 value是表单提交时的值
placeholder="" 输入框提示信息
size="" 输入框的宽度
readonly 表示内容不可以编辑 只读 (但是提交时 会被提交)
disabled 表示内容不可用 (也不会被提交)
密码框:
input:type="password"
属性 跟上面输入框 一毛一样!!!!!
单选框:
input:type="radio"
实现单选的方式: 同一个name值的单选框实现单选
单选的value值是用来提交的 而外面显示的文字是给用户看的
选谁提交谁 不选则不提交
属性:
checked 默认选中
多选框:
input:type="checkbox"
checked 默认选中
<form action="http://www.baidu.com">
<!-- value="我是内容" -->
<input type="text" disabled size="60" name="username" placeholder="请输入手机号" value="我是内容">
<br>
<input type="password" name="password">
<br>
<input type="radio" checked name="gender" value="man">男
<input type="radio" name="gender" value="woman">女
<input type="radio" checked name="country" value="China">中国
<input type="radio" name="country" value="USA">美国
<br>
<input type="checkbox" name="hobby" checked value="football">足球
<input type="checkbox" name="hobby" value="blueball">蓝球
<input type="checkbox" name="hobby" value="earthball">地球
<br>
<input type="checkbox" name="fruit" checked value="apple">苹果
<input type="checkbox" name="fruit" value="bunana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子
<p>
<input type="submit">
</p>
</form>下拉框 (下拉菜单)
选择哪一个option 就提交哪一个
selected 默认显示的条目
<select name="city" >
<option value="beijing">北京</option>
<option value="sanhe">三河</option>
<option selected value="yanjiao">燕郊</option>
<option value="fangshan">房山</option>
</select> 多选菜单:
在select下拉菜单基础上 添加一个 multiple
<select name="fruit" multiple>
<option value="apple">苹果</option>
<option value="orange">橙子</option>
<option value="banana">香蕉</option>
<option value="yingtao">樱桃</option>
</select> 多行文本框
textarea
placeholder="请输入你的描述"
cols="30" 多少列
rows="10" 多少行
<textarea name="mtext" cols="30" rows="10">嘿嘿
</textarea>专门用来显示提示信息的
以后可以通过css改变文字样式
其实label有一个非常好用的功能:
跟输入框绑定
label的for如果关联一个input的id
那么点击label时 输入框也会获得焦点可以输入
提交按钮:
input:type="submit"
专门放在form表单里面 用来点击提交表单数据的按钮
普通按钮:
input:type="button"
专门用来结合JavaScript 实现点击效果的
现在没学JavaScript 所以现阶段就是按着玩 没啥作用
重置按钮
input:type="reset"
把当前表单的所有控件的值回归到初始值
<label for="mobile">在此输入手机号</label>
<input type="text" id="mobile" value="哈哈,我是默认值">
<p>
<input type="submit">
</p>
<p>
<input type="button" value="按着玩">
</p>
<p>
<input type="reset">
</p>form剩余控件
<form action="http://www.baidu.com">
<p>
<input type="text" name="username">
</p>
<p>
<!-- 用户看不见 用来传输一些不需要用户操作的数据 -->
<input type="hidden" name="time" value="2019-11-29 15:16:24">
</p>
<p>
<input type="submit" value="注册">
</p>
<!-- 以图片为提交按钮 具有提交功能-->
<p>
<input type="image" src="33.gif">
</p>
<!-- 文件域 -->
<p>
<input type="file" name="file">
</p>
<p>
<!-- 默认具有提交功能的按钮 -->
<button>我也是提交按钮</button>
<!-- 重置功能的按钮 -->
<button type="reset">我是重置按钮</button>
<!-- 按着玩的按钮(后面结合js使用的) -->
<button type="button">我是按着玩的</button>
<!-- type默认是submit -->
<button type="submit">我是不写type默认就是提交的按钮</button>
</p>
</form>关于文件上传的配置:
第一步:
把form表单的method改成post
因为get上传实在地址栏 根本无法完成上传(文件太大)
第二步:
把form表单的默认提交方式从原来的字符串 变成二进制流的方式提交
form表单的ecntype属性默认是
application/x-www-form-urlencoded(默认地址栏的字符串上传)
需要改成:
multipart/form-data(多部分 form表单数据流的方式)
<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="file">
</p>
<button>上传</button>表单分组:
把表单里面时同一块内容的分到一个组里面
让表单的结构内容更清晰
fieldset(分组) legend(分组的名字)
<form action="#">
<fieldset>
<legend>手机号注册方式</legend>
<p>
<label for="mobile">输入手机号</label>
<input type="text" id="mobile" name="mobile">
</p>
<p>
<button>手机号注册</button>
</p>
</fieldset>
<fieldset>
<legend>邮箱注册方式</legend>
<p>
<label for="email">输入邮箱</label>
<input type="text" id="email" name="email">
</p>
<p>
<button>邮箱注册</button>
</p>
</fieldset>
</form>