html表单的相关元素

 1、文本框 

    文本框:

    <input type="text" name="user"  value="用户名" size="10" maxlength="10">


    2、密码框 

    <!-- HTML5标准下 自闭合标签末尾加不加斜杆都可以 -->

    密码框:

    <input type="password" name="pwd" size="20" >


  3、单选按钮 

    <!-- 两个单选框里面的name 值必须保持一致,否则不能起到二选一的或者多选一 的作用 -->

    <!-- checked: 表示一开始默认选中哪一个,多个单选不要都加上checked,否则以最后一个为准 -->

    性别:

    男 <input name=“gen” type="radio" value="男" checked>

    女 <input name=“gen” type="radio" value="女" >

    中性 <input name="gen" type="radio" value="中性">


4、 复选框

    你橱柜中的包包:

    <input type="checkbox" name="baobao" value="lv">LV包

    <input type="checkbox" name="baobao" value="guchi">古驰

    <input type="checkbox" name="baobao" value="xnr">香奈儿



5、 列表框 

    <!-- 在列表框 size表示列表框的行数 -->

    <!-- selected="selected" 表示默认的选中那一项 可以简写成selected -->

    <!-- value是要写的,这里写的意思是提交给后台服务器的值 -->

    <select name="cars" size="1">

        <option value="audio">奥迪</option>

        <option value="bmv" selected>宝马</option>

        <option value="bc">奔驰</option>

    </select>


6、按钮 

  6.1重置按钮 

    <!-- value:是按钮上显示的文字 -->

    <!-- 这里最外面一定要加上form这个标签,否则不生效 -->

    <!-- 快速打出reset标签 input:reset -->

    <input type="reset" name="resetName" value="重置按钮">

6.2提交按钮

    <!-- 点击提交按钮,会还原之前的表单数据的内容,然后把编辑好的数据发送给服务器 -->

    <!-- 在资源管理器里面双击打开,不要用其他插件 -->

    <input type="submit" name="submitName" value="提交按钮">

6.3 普通按钮

    <!-- 只是一个单纯的按钮 -->

    <input type="button" name="btn" value="普通按钮">


6.4图片按钮

    <!-- src: 图片路径 -->

     <!-- ./和不写是一回事,都是在当前路径下去寻找图片 -->

        <!-- 图片按钮也起着提交表单的作用 -->

    <input type="image" src="图片路劲地址"  width="50" height="50">


7、多行文本域

    <!-- cols 可以改变文本域的宽度  列数-->

    <!-- rows 可以改变文本域的高度 行数 -->

    <textarea name="showText" cols="30" rows="10"></textarea>


 8、文件域 

    上传文件:<input type="file" name="fileName" >

   <!- 隐藏域 -->

    <!-- 隐藏域就是不显示该表单,但是点击提交的时候也会把name,value 的值提交给后台 -->

    <!-- 一般的用途是:不需要用户操作什么,只想把这个默认的数据值提交给后台 -->

    隐藏域:<input type="hidden" name="hiddenName" value="666">


 9、只读文本框

    <!-- 设置readonly 属性, 就可以成为只读的文本属性 -->

    只读文本框:<input type="text" name="zhidu" value="只可以看哦" readonly>


10、禁用

  <!-- 前面一个单词小写后面一个单词大写,叫做驼峰命名 -->

  <!-- 一般用于:比如一个需求,用户还没有输入数据不可以点击提交按钮,拍用户做一些无效点击,一点击就会发送给服务器,所以可以采用置灰的办法,阻止用户频繁点击提交按钮 -->

<input type="submit" name="disBtn" value="我置灰了" 

disabled>

readonly 和 diabled的两种写法

第一种写法:readonly="true"  disabled="true"

第二种写法:readonly  diabled


效果图:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容