HTML5系例-form表单

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>