表单基础

input属性都必须要一个name标签!

文本输入框:input type="text" 每一个input 都要取名字好区分是干啥用的

<p>名字: <input type="text" name="username"></p>

密码框:input type="password"

<p>密码: <input type="password" name="pwd"></p>

提交:input type ="submit"

<input type="submit">

重置: input type="reset"

<input type="reset">

表单元素格式

属性说明
type指定元素的类型。text,password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
name指定表单元素的名称<必填>
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlengthtype为text或password时,输入的最大字符数
checkedtype为radio或checkbox时,指定按钮是否被选中

表单语法

name:表单元素的名称 value:初始值 maxlength:最长能写几个字符 size:文本框的长度

 <p>名字: <input type="text" name="username" value="法外狂徒" maxlength="8" size="30"></p>

radio:单选框标签 value:单选框的值 name: 单选框组必须一样 name:表示组

 <p>性别:
        <input type="radio" value="boy" name="sex"/ checked>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

checkbox:多选框标签

 <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

butto:普通按钮 image:图片按钮<图片按钮标签点击也可以提交> submit:提交按钮 resetL:重置按钮

 <p>按钮:
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../img/zm16jy.jpg" width="150px">
           <input type="submit">
        <input type="reset" value="清空表单">
    </p>

file:文件域

<p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
</p>

select option: 下拉框

  <p>国家:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="America">美国</option>
            <option value="Switzerland" selected>瑞士</option>
            <option value="India">印度</option>
        </select>

textarea:文本域 cols:文本行数 rosw:文本列数

<p>反馈:
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

带功能的标签:

email:邮箱

<p>邮箱:
    <input type="email" name="email">
</p>

url:网址

 <P>URL:
        <input type="url" name="url">
 </P>

number:数字验证 max:最大值 min:最小值 step:一次加多少值

 <p>商品数量:
        <input type="number" name="num" max="100" min="0" step="1">
 </p>

range:滑块

 <p>音量:
        <input type="range"  name="voice" max="100" min="0" step="2">
 </p>

search:搜索框

<p>搜索框:
        <input type="search" name="search">
</p>

label:增强鼠标可用性 点击文字就可以锁定框 for:可以指向一个位置

 <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

表单的应用:

  • readonly:只读
  • disabled: 禁用
  • hidden: 隐藏域 <可以通过隐藏域传默认值>
  • checked: 默认选中的 <单选框>
  • selected: 默认选中的 <多选框>

表单初级验证

为什么需要初级验证?

  1. 减轻服务器压力,防止用户输错还要接收请求
  2. 保证数据的安全

常用方式:

  • placeholder:提示信息
  • required: 非空判断
  • pattern: 正则表达式

正则表达式:常用的正则表达式_正则表达式大全_脚本之家 (jb51.net)

  <p>自定义邮箱:
        <input type="text" name="diymail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
   </p>
最后修改:2021 年 11 月 30 日 11 : 35 AM
如果觉得我的文章对你有用,请随意赞赏