码迷,mamicode.com
首页 > 其他好文 > 详细

表单基础

时间:2020-06-26 00:56:36      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:text   arc   get   山东   高级   相同   验证   login   require   

一.表单  基本语法:   <form method="表单提交方式(post/get)" action="表单提交地址">       </form>    二.input元素  type:代表input元素类型  name: 表单元素名称  value: 表单元素初始值  size: 表单宽度  maxLength: 输入的最大字符数  checked: 主要用于单选或多选按钮,代表默认选中   三.常用表单元素    1.普通文本框 <input type="text" name="username" value="杨凯" size="30px" maxlength="10"/>    2.密码框  <input type="password" name="password" size="30" maxlength="16"/>    3.单选按钮(name属性必须有,值相同)     <input type="radio" name="gender" value="男" checked/>男   <input type="radio" name="gender" value="女"/>女     4.多选按钮(name属性必须有,值相同,可以选择多个)   <input type="checkbox" name="hobby" value="睡觉" checked/>睡觉         <input type="checkbox" name="hobby" value="吃饭"/>吃饭         <input type="checkbox" name="hobby" value="打豆豆"/>打豆豆     5.下拉框(name属性必须有,size代表初始显示项数)    <select name="address">                     <option value="北京" name="bj">北京</option>                     <option value="上海" name="sh">上海</option>                     <option value="南京" name="nj">南京</option>                     <option value="山东" name="sd" selected>山东</option>                     <option value="西安" name="xa">西安</option>              </select>      6.按钮   button普通按钮:<input type="button" name="button" value="普通按钮"/>         reset按钮:(重置表单数据)<input type="reset" name="reset" value="重置按钮"/>         submit提交按钮:<input type="submit" name="submit" value="提交按钮"/>         image图像按钮(同样会提交表单数据):<input type="image" src="../image/login.gif" name="image"/>     7.多行文本域<textarea name="textarea" rows="20" cols="50"></textarea>       8.文件域   <form action="" method="post" enctype="multipart/form-data">    <input type="file" name="files" />     </form>

    9.email自动验证:  <input type="email" name="email"/>       10.网址自动验证: <input type="url" name="url"/>            11.数字:<input type="number" min="0" max="100" step="5" name="number"/>            12.滑块:<input type="range" name="range" max="20" min="-20" step="10"/>             13.搜索框:<input type="search" name="search"/>   四.表单的高级应用    1.隐藏域(在表单当中不会显示,但是确实存在数据,当提交时会将隐藏用于数据一起提交)   <input type="hidden" value="666" name="userid">

 2.只读和禁用   <input name="name" type="text" value="张三"  readonly>   <input type="submit "  disabled   value="保存" >  3.标注(光标定位)   <label for="id">标注的文本</label>   <input type="radio" name="gender" id="male"/>    五.表单的初级验证  1.placeholder 友好提示  2.required  非空  3.pattern  正则表达式验证    用户名:<input type="text" name="username" placeholder="请输入用户名" required/>     手机号:<input type="text" name="phone" required pattern="^1[358]\d{9}"/>     <input type="submit" value="提交"/>

表单基础

标签:text   arc   get   山东   高级   相同   验证   login   require   

原文地址:https://www.cnblogs.com/meilishi/p/13193487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!