斑马兽

Appearance

表单与列表 ​

表单 ​

表单是服务器收集用户数据的方式。

FORM ​

一般情况下表单项要放在 FORM 内提交。

<form action="bm.php" method="POST">
	<fieldset>
		<legend>测试</legend>
		<input type="text">
	</fieldset>
</form>
属性说明
action后台地址
method提交方式 GET 或 POST

LABEL ​

使用 label 用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的 ID 在页面中是唯一的。

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

也可以将文本框放在 label 标签内部，这样就不需要设置 id 与 for 属性了

INPUT ​

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

属性说明
type表单类型默认为 text
name后台接收字段名
required必须输入
placeholder提示文本内容
value默认值
maxlength允许最大输入字符数
size表单显示长度，一般用不使用而用 css 控制
disabled禁止使用，不可以提交到后台
readonly只读，可提交到后台
capture使用麦克风、视频或摄像头哪种方式获取手机上传文件，支持的值有 microphone, video, camera

基本示例

<form action="bm.php" method="POST" novalidate>
  <fieldset>
      <legend>文本框</legend>
      <input type="text" name="title" required placeholder="请输入标题" maxlength="5" value="" size="100">
  </fieldset>
</form>

调取摄像头

当 input 类型为 file 时手机会让用户选择图片或者拍照，如果想直接调取摄像头使用以下代码。

<input type="file" capture="camera" accept="image/*" />

其他类型

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

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

HIDDEN ​

隐藏表单用于提交后台数据，但在前台内容不显示所以在其上做用样式定义也没有意义。

<input type="hidden" name="id" value="1">

提交表单 ​

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

  1. 使用 input 构建提交按钮，如果设置了 name 值按钮数据也会提交到后台，如果有多个表单项可以通过些判断是哪个表单提交的。

    <input type="submit" name="submit" value="提交表单">

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

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

禁用表单 ​

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

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

PATTERN ​

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

属性说明
pattern正则表达式验证规则
oninvalid输入错误时触发的事件
<form action="">
	<input type="text" name="username" pattern="[A-z]{5,20}"
	oninvalid="validate('请输入5~20位字母的用户名')">
	<button>提交</button>
</form>

<script>
	function validate(message) {
		alert(message);
	}
</script>

TEXTAREA ​

文本域指可以输入多行文本的表单，当然更复杂的情况可以使用编辑器如ueditor、ckeditor等。

选项说明
cols列字符数（一般使用 css 控制更好）
rows行数（一般使用 css 控制更好）
<textarea name="content" cols="30" rows="3">banmashou.com</textarea>

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>

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>

CHECKBOX ​

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

<fieldset>
        <legend>复选框</legend>
        <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>
</fieldset>

文件上传 ​

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

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

<form action="" method="POST" enctype="multipart/form-data">
	<fieldset>
		<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
	</fieldset>
	<button>保存</button>
</form>

日期与时间 ​

属性说明
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">

DATALIST ​

input 表单的输入值选项列表

<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>

autocomplete ​

浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

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

列表 ​

列表的使用与word 等软件的列表概念相似，只不过是应用在网页展示中。

有序列表 ​

有序列表是指有数字编号的列表项，可以使用CSS定义更多样式，具体请查看 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>斑马兽</li>
	<li>banmashou.com</li>
	<li>xinxinya.com</li>
</ol>

无序列表 ​

没有数字编号的列表项，可以使用CSS定义更多样式，具体请查看 CSS 章节。

<ul>
    <li>斑马兽</li>
    <li>banmashou.com</li>
    <li>xinxinya.com</li>
</ul>

描述列表 ​

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

<dl>
    <dt>开源产品</dt>
    <dd>斑马兽</dd>
    <dd>欣欣呀</dd>

    <dt>网站导航</dt>
    <dd>banmashou.com</dd>
    <dd>xinxinya.com</dd>
</dl>

作者: HeJun 邮箱：banmawang2021@163.com
Copyright © banmashou.com All Rights Reserved