HTML表单的使用

Posted 2022-12-15

1.form表单：

  属性：method：提交方式（get显示提交，post隐性提交）

  action：数据提交地址

  enctype:表单编码属性

  例:

  <form method="get" action="#" enctype="multipart/form-data">

  //表单内容

  </form>

  input：输入框

  属性：type：输入框类型

  name：输入框名字

  value：默认值

  size：初始宽度（当type为text或者password时以字符为单位，其它以像素为单位）

  maxlength：最大字符输入长度

  checked：默认选中（type值为radio或checkbox）

  文本框：

  例：<input required type="type" value="" name="userName" placeholder="请输入账号" size="16" maxlenfth="12">

  密码框：

  例：<input type="password" value="" name="password" placeholder="请输入密码">

  单选按钮：（同一单选框name值必须相同）name，value必须写

  例：

  <input type="radio" name="sex" value="男" checked>男

  <input type="radio" name="sex" value="女">女  

  复选按钮：（同一复选按钮name值必须相同）name，value必须写

  例：

        <input type="checkedbox" name="like" value="亡者农药">王者荣耀

  <input type="checkedbox" name="like" value="逆战">逆战

  <input type="checkedbox" name="like" value="刺激战场">刺激战场

  <input type="checkedbox" name="like" value="LOL" checked>LOL

  下拉框：（select：下拉框，option：选项，size：显示的行数，name和value必须写）

  例：

  <select name="interest">

  <option value="sport">运动</option>

  <option value="sport">睡觉</option>

  <option value="killDouDou">打豆豆</option>

  </select>

  普通按钮：

  例：

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

  提交按钮：

  例：

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

  重置按钮：

  例：

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

  图片按钮：

  例：

  <input type="image" name="img" src="sub.jpg">

  多行文本域：属性rows：显示的行数，cols：显示的列数

  例：

  <textarea name="area" rows="5" cols="40">这是多行文本域

  </texetarea>

  文件域：（如果表单中存在文件域，必须在form表单中添加表单编码属性enctype="multipart/form-dota"）

  例：

  <input type="file" name="file">

  邮箱：（会自动检查邮箱格式是否正确）

  例：

  <input type="email" name="email">

  网址：（会检查网址格式是否正确）

  例：

  <input type="url" name="urls">

  数字：（只能输入数字）step：合法数字间隔 min：允许出现的最小数字，max允许出现的最大数字

  例:

  <input type="number" name="number" step="2" min="0" max="100">

  滑块：step:合法数字间隔 min：允许出现的最小数字，max允许出现的最大数字

  例：

  <input type="range" name="range" min="0" max="100" step="5">

  搜索框：

  例：

  <input type="search" name="search">

  <input type="text" name="phone" pattern="^1[3578]\\d9">

  disabled:禁用

  hidden：隐藏

  readonly：只读

  表单初级验证：

  required:不可为空，否则无法提交数据

  placeholder：提示文字

  pattern:正则表达式