HTML5系例-form表单

最新推荐文章于 2024-11-23 22:38:55 发布

原创最新推荐文章于 2024-11-23 22:38:55 发布 · 643 阅读

1 ·

CC 4.0 BY-SA版权

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

文章标签：

#html表单 #form表单

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML5表单的各种元素及其属性，包括FORM、LABEL、INPUT、TEXTAREA、SELECT、RADIO、CHECKBOX等，涵盖了表单提交、验证、样式控制及数据处理等内容。

1.FORM表单

<form action="url" method="POST" novalidate>
    <label for="title">标题</label>
    <input type="text" name="title" id="title">
</form>

属性	说明
action	后台地址
method	提交方式 GET 或 POST

我们通过表单的形式，提交一些数据往后台，这是我们常用的方式；当然我们也可以通过操作DOM，获取录入框里面的值，提交到后台。上传文件时我们要用到form表单对象。

2.LABEL

这里我们着重强调下label的使用：

我们可以像上面一样，label和input并列使用，通过label的for属性，属性值是input的id；也可以用label直接包裹input使用：

<form action="url" method="POST" novalidate>
    <label>
        标题<input type="text" name="title">
    </label>    
</form>

这样就不需要设置 id 与 for 属性了。

3.INPUT

文本框用于输入单行文本使用，下面是常用属性与示例。

属性	说明
type	表单类型默认为 `text`
name	后台接收字段名（必须设置）
required	必须输入
placeholder	提示文本内容
value	默认值
maxlength	允许最大输入字符数
size	表单显示长度，一般用不使用而用 `css` 控制
disabled	禁止使用，不可以提交到后台
readonly	只读，可提交到后台

4.type类型

通过设置表单的 type 字段可以指定不同的输入内容。

类型	说明
email	输入内容为邮箱
url	输入内容为URL地址
password	输入内容为密码项
tel	电话号，移动端会调出数字键盘
search	搜索框
hidden	隐藏表单
submit	提交表单

5.HIDDEN表单隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：

6.提交表单

创建提交按钮可以将表单数据提交到后台，有多种方式可以提交数据如使用AJAX，或HTML的表单按钮。

1.使用input构建提交按钮，如果设置了name值按钮数据也会提交到后台，我们就可以知道点了哪个提交按钮，如下代码，点提交或保存草稿，将对应name提交到后台，后台判断区分。

 <form action="url" method="POST">
      <label for="title">标题：</label>
      <input type="text" id="title" />
      <label for="content">内容：</label>
      <input type="text" id="content" />
      <input type="submit" name="save" value="提交" />
      <input type="submit" name="up" value="保存草稿" />
 </form>

2.使用button也可以提交，设置type属性为submit 或不设置都可以提交表单。

<button type="submit">提交表单</button>

7.禁用表单

通过为表单设置 disabled 或 readonly 都可以禁止修改表单，但 readonly表单的数据可以提交到后台。

<input type="text" name="web" value="baidu.com" readonly>

8.PATTERN表单验证

表单可以通过设置 pattern 属性指定正则验证，也可以使用各种前端验证库如 formvalidator 或 validator.js。

属性	说明
pattern	正则表达式验证规则
oninvalid	输入错误时触发的事件

<form action="">
	<input type="text" name="username" pattern="[A-z]{5,20}" 
	oninvalid="alert('请输入5~20位字母的用户名')">
	<button>提交</button>
</form>

9.TEXTAREA多行文本框

文本域指可以输入多行文本的表单，区别于单行文本框，多行文本框默认值要放在开始，结束标签之间；更复杂的情况可以使用富文本编辑器如ueditor、ckeditor等。

属性	说明
cols	列字符数（一般使用 CSS 的 height 和 width 属性控制更好）
rows	行数（一般使用 CSS 的 height 和 width 属性控制更好）

<textarea name="content" cols="30" rows="3">好好学习HTML5</textarea>

10.SELECT下拉列表

下拉列表项可用于多个值中的选择。

属性	说明
multiple	支持多选
size	列表框高度
optgroup	选项组
selected	选中状态
option	选项值

<select name="lesson">
        <option value="">== 选择课程 ==</option>
        <optgroup label="后台">
            <option value="php">PHP</option>
            <option value="linux">LINUX</option>
            <option value="mysql">MYSQL</option>
        </optgroup>
        <optgroup label="前台">
            <option value="php">HTML</option>
            <option value="linux">JAVASCRIPT</option>
            <option value="mysql">CSS</option>
        </optgroup>
</select>

选择的值将赋给select的name属性，如果是多选的话，name属性值是的数组形式，如下：

 <select name="language[]" id="" multiple>
      <option value="1">thml5</option>
      <option value="2">css3</option>
      <option value="3" selected>js</option>
 </select>

11.RADIO单选框

单选框指只能选择一个选项的表单，如性别的选择男、女、保密 只能选择一个。

属性	说明
checked	选中状态

<input type="radio" name="sex" value="boy" id="boy">
<label for="boy">男</label>

<input type="radio" name="sex" value="girl" id="girl" checked>
<label for="girl">女</label>

注意label标签的使用，点击label是可以选中的radio的。如果是录入框就可以是录入框获取到焦点。

12.CHECKBOX复选框

复选框指允许选择多个值的表单。

<input type="checkbox" name="sex" value="boy" id="boy" />
<label for="boy">PHP</label>

<input type="checkbox" name="sex" value="girl" id="girl" checked />
<label for="girl">MYSQL</label>

13.文件上传

文件上传有多种方式，可以使用插件或JS拖放上传处理。HTML本身也提供了默认上传的功能，只是上传效果并不是很美观。

属性	说明
multiple	支持多选
accept	允许上传类型 `.png,.psd` 或 `image/png,image/gif`

<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">

14.日期与时间

属性	说明
step	间隔：date 缺省是1天，week缺省是1周，month缺省是1月
min	最小时间
max	最大时间

日期选择

<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">

周选择

<input type="week">

月份选择

<input type="month">

日期与时间

<input type="datetime-local" name="datetime">

15.DATELIST下拉列表

input表单的输入值选项列表和select类似。

<form action="" method="post">
  <input type="text" list="lesson">
  <datalist id="lesson">
    <option value="PHP">后台管理语言</option>
    <option value="CSS">美化网站页面</option>
    <option value="MYSQL">掌握数据库使用</option>
  </datalist>
</form>

16.autocomplete记忆录入

记住曾经输入过的内容，为了不让别人看到录入过的内容，也可以选择关闭。

<form action="">
  <input type="search" autocomplete="on" name="content" />
  <button>提交</button>
</form>

17.ol，ul，dl列表

有序列表

有序列表是指有数字编号的列表项，可以使用CSS定义更多样式。

<style>
      .li-style1 {
        /* 
          circle      空心圆
          disc        实心圆
          square      实心方块
          decimal     数字
          upper-alpha 大写字母
          lower-alpha 小写字母
          upper-roman 大写罗马数字
          lower-roman 小写罗马数字
           */
        list-style-type: decimal;
      }

      .li-style2 {
        /* 取消风格 */
        list-style: none;
      }
      .li-style3 {
        /*inside 内部 outside 外部（默认）*/
        list-style-position: inside;
      }
 </style>

    <ol start="1">/*开始序号*/
      <li>HTML5</li>
      <li>CSS3</li>
      <li>js</li>
    </ol>

无序列表

没有数字编号的列表项，可以使用CSS定义更多样式。

 <style>
      .li-style1 {
        /* 
          circle      空心圆
          disc        实心圆
          square      实心方块
          decimal     数字
          upper-alpha 大写字母
          lower-alpha 小写字母
          upper-roman 大写罗马数字
          lower-roman 小写罗马数字
           */
        list-style-type: decimal;
      }

      .li-style2 {
        /* 取消风格 */
        list-style: none;
      }
      .li-style3 {
        /*inside 内部 outside 外部（默认）*/
        list-style-position: inside;
      }
    </style>

    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>js</li>
    </ul>
  </body>

描述列表

描述列表指每个列表项有单独的标题。

<dl>
      <dt>前端</dt>
      <dd>HTML</dd>
      <dd>CSS</dd>

      <dt>后端</dt>
      <dd>JAVA</dd>
      <dd>PHP</dd>
 </dl>