- A+
所属分类：Web前端
表单应用场景实例：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <input type="text" name="title"> <input type="text" name="content"> </fieldset> <button>提交</button> </form>
表单描述标签的使用：
<!-- 方式1 --> <form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <label for="title">标题</label> <input type="text" name="title" id="title"> <hr> <label for="content">内容</label> <input type="text" name="content" id="content"> </fieldset> <button>提交</button> </form> <hr> <!-- 方式2 --> <form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <label>标题 <input type="text" name="title2" id="title2"> </label> <hr> <label>内容 <input type="text" name="content2" id="content2"> </label> </fieldset> <button>提交</button> </form>
表单约束属性：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <label>标题 <input type="text" name="title" id="title" required value="标题默认值" size="40"> <small>请输入标题</small> </label> <hr> <label>内容 <input type="text" name="content" id="content" required placeholder="请输入内容" maxlength="3"> </label> </fieldset> <button>提交</button> </form>
表单访问限制技巧：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <label>标题 <input type="text" name="title" id="title" value="标题默认值" readonly> <small>请输入标题</small> </label> <hr> <label>内容 <input type="text" name="content" id="content" disabled> </label> </fieldset> <button>提交</button> </form>
常用字段类型扩展：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <input type="text" value="文本" > <hr> <input type="password" value="密码" > <hr> <input type="email" value="邮箱" > <hr> <input type="url" value="url网址" > <hr> <!-- 移动端输入时会调出拨号键盘 --> <input type="tel" value="tel" > <hr> <input type="number" value="数值" > </fieldset> <button>提交</button> </form>
隐藏与表单提交技巧：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <input type="hidden" name="token" value="12345" > <hr> </fieldset> <button>提交</button> <button type="submit">submit可以提交表单</button> <button type="button">普通按钮，无法提交表单</button> <!-- name值也可以提交过去 --> <input type="submit" value="submit" name="submit"> </form>
表单验证使用总结：
可以使用优秀的js表单验证库
html自带的表单验证：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <input type="text" pattern="[a-z]{3}" required oninvalid="valid('用户名必须，且为3位数英文字母')"> <hr> </fieldset> <button>提交</button> </form> <script> function valid(message){ alert(message); } </script>
大文本与列表框技巧：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <textarea name="content" id="content" cols="30" rows="10" placeholder="请输入内容">这是默认值</textarea> <hr> <select name="" id=""> <option value="1">item1</option> <option value="2">item2</option> </select> <!-- 设置允许多选 --> <select name="res[]" id="" multiple> <option value="1">item1</option> <option value="2" selected size="30">item2</option> </select> <!-- 分组 --> <select name="" id=""> <optgroup label="group1"> <option value="1">item1</option> <option value="2">item2</option> </optgroup> <optgroup label="group2"> <option value="11">item11</option> <option value="22">item22</option> </optgroup> </select> </fieldset> <button>提交</button> </form>
选项框标准打开方式：
<form action="http://localhost/1.php" method="POST"> <fieldset> <legend>cyy表单</legend> <!-- 单选 --> <input type="radio" name="sex" id="boy" value="1"> <label for="boy">boy</label> <input type="radio" name="sex" id="girl" checked value="2"> <label for="girl">girl</label> <hr> <!-- 复选，需要设置为数组格式 --> <input type="checkbox" name="sex[]" id="boy" value="1"> <label for="boy">boy</label> <input type="checkbox" name="sex[]" id="girl" checked value="2"> <label for="girl">girl</label> </fieldset> <button>提交</button> </form>
1.php
<?php var_dump($_POST);
结果
文件上传：
<form action="http://localhost/1.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>cyy表单</legend> <!-- 文件 --> <input type="file" name="image" id="image"> <hr> <!-- 多文件 --> <input type="file" name="images[]" id="images" multiple> <hr> <!-- 限制上传格式1 --> <input type="file" name="file1[]" id="file1" accept="image/jpeg,image/png,image/psd"> <hr> <!-- 限制上传格式2，扩展名形式 --> <input type="file" name="file1[]" id="file1" accept=".jpg,.png,.psd"> </fieldset> <button>提交</button> </form>
时期与时间表单：
<form action="http://localhost/1.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>cyy表单</legend> <input type="date" name="date" id="date"> <input type="time" name="time" id="time"> <input type="week" name="week" id="week"> <hr> <input type="date" min="2020-10-10" max="2020-12-12" step="5"> <input type="datetime-localhost"> </fieldset> <button>提交</button> </form>
不过还是建议使用第三方组件
搜索表单与datalist数据列表：
<form action="http://localhost/1.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>cyy表单</legend> <input type="search" list="mydata"> <datalist id="mydata"> <option value="1">item1</option> <option value="2">item2</option> <option value="3">item3</option> </datalist> </fieldset> <button>提交</button> </form>
表单历史数据自动提示：
<!-- action不加地址，会刷新当前页 --> <form action="" method="POST"> <fieldset> <legend>cyy表单</legend> <input type="text" autocomplete="on" name="title1"> <input type="text" autocomplete="off" name="title2"> </fieldset> <button>提交</button> </form>
三种列表项使用：
<style> .style1{ list-style:none; } .style2{ list-style-position:inside; list-style-type:circle; } </style> <!-- 有序列表 --> <ol start="1" class="style1"> <li>1</li> <li>2</li> <li>3</li> </ol> <!-- 无序列表 --> <ul class="style2"> <li>1</li> <li>2</li> <li>3</li> </ul> <!-- 自定义列表 --> <dl> <dt>描述标题</dt> <dd>描述内容1</dd> <dd>描述内容2</dd> <dd>描述内容3</dd> </dl>
