表单元素

输入框

用户名:<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判断用户把表单内容输入完毕了,再把禁用属性去掉

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容