输入框
用户名:<input type="text" value="" name="" size="" maxlength="">
密码:<input type="password" value="" name="" size="" maxlength="">
type :指定元素的类型 默认为 text type的类型有可能是:text、password、checkbox、radio、submit、reset、file、hidden、image 和 button
input:输入框 text:指文本框 password:加密框 value: 表示元素的初始值
name:指定表单元素的名称 size:指定表单元素的初始宽度,当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlengh: 当 type 为 text 或 password时,可输入的最大字符
单选框
例:<input type="radio" name="sex" value="nan"> 男
<input type="radio" name="sex" value="woman" checked> 女
checked:表示单选按钮选中状态 可以给单选按钮一个默认的选中的值
单选框如果想实现二选一 name值必须设置成一样的
type 为 radio时value必须指定一个值 因为单选框是通过用户选择的,不是需要用户手动的输入值
radio单选框的value值一般用英文表示。
复选框
例:<input type="checkbox" name="play" value="dq"> 打球
<input type="checkbox" name="play" value="dyx" checked> 打游戏
<input type="checkbox" name="play" value="yy"> 游泳
checked:默认选中状态
按钮
例:提交按钮:<form>
用户名:<input type="text" value="" name="" size="" maxlength="">
密码:<input type="password" value="" name="" size="" maxlength="">
<input type="submit" value="提交"> </form>
type="submit" 表示提交按钮 只有在form表单包裹才能用
普通按钮: <input type="button" value="普通按钮" name="btn">
普通按钮不具备提交功能
重置按钮:<form><input type="checkbox" name="play" value="dq"> 打球
<input type="checkbox" name="play" value="dyx" checked> 打游戏
<input type="checkbox" name="play" value="yy"> 游泳
<input type="reset" name="reset" value="重置按钮"></form>
重置按钮 恢复到默认的值
图片按钮:<form><input type="image" src="./" name="imgName"></form>
input type="image"是具有提交功能 可以把数据提交给后台,input type="image" 的值是点击图片的时候的坐标
x表示x轴 x轴是值从左到右逐渐变大 y表示y轴值从上往下逐渐变大。
列表框(下拉框)
<select name="car" size="1">
<option value="bmw">宝马</option>
<option value="benc" >奔驰</option>
<option value="audi" selected>奥迪</option>
</select>
size :显示行数 默认显示一行
默认选择第一个option选项
name值在select标签上设置
value值在option标签上设置
真正需要发送给后台的值 是value中的值
默认选中项 可以设置selected="selected" 简写 selected
多行文本域
<form><textarea name="areaName" cols="5" rows="5"></textarea>
<input type="submit" value="提交"></form>
cols显示的列数 主要控制多行文本域的宽度 和显示的字符相比 是一个大概的范围
rows现实的行数 主要控制多行文本域的高度
不放在form里面 点击提交就不能发送给后台了
文件域
<form method="post" enctype="multipart/form-data">
<input type="file" name="fileName">
<input type="submit" value="提交"> </form>
fileName=1.jpg name表示数据的名称 1.jpg表示文件名
input type="file" 可以上传文件
一般文件提交的时候 采用post请求 加密 一般上传文件 会设置编码属性 enctype="multipart/form-data" 表单属性
隐藏域
<form><input type="hidden" name="hiddenname" value="000">
<input type="submit" value="提交"></form>
隐藏域的作用 需要把数据的名称hideName和值000传给后台 ,但是不想让用户在页面上看到,只是单纯的想发送一段数据
只读和禁用
<form>
<input type="text" name="user" value="张三" readonly>
<input type="submit" value="提交" disabled> </form>
readonly 是只读属性 作用是只是让用户看到 但是并不想让用户修改
disabled 禁用属性 目的是把按钮原来功能禁用掉
使用场景:比如用户还没有把表单的内容填写好,就先把提交按钮禁用,通过javascript判断用户把表单内容输入完毕了,再把禁用属性去掉