表单 - 表单基本使用（用户注册表单）

CharlesY
149 阅读3分钟

常用表单

<form action="向何处发送表单数据" method="get或post">
    <input type="button" value="">
    <!-- 
        A 属性 type ：定义输入框的类型
          a 文本框 type="text" 
          b 密码框 type="password"
          C 提交框 type="submit"
          D 按钮框 type="button" 单纯按钮
          E 重置框 type="reset"  清空内容
        B 属性 placeholder ：描述输入字段预期值的提示信息（兼容到IE8以上）
        C 属性 name ：必须设置，否则在提交表单的时候，用户在其中输入的数据不会被发送到服务器
        D 属性 value ：
     -->
</form>

form 当中method的post和get的区别？

  1. get是从服务器上获取数据，post是向服务器传送数据
  2. get是把参数数据队列加到提交表单的action属性所指的url中，值和表单内各个字段一一对应，在url中可以看到；post是通过Http post机制，将表单内各个字段与其内容放置在html header内一起传送到action属性所指的url地址，用户看不到这个过程
  3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据
  4. get传送的数据量较小，不能大于2KB，post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS中为100KB
  5. get安全性非常低，post安全性较高，但是执行效率却比post方法好

表单进阶

  1. hidden 隐藏功能，一般是用于要带给后端的个人信息，不面向客户端用户开放的内容
  2. 图片按钮 - 功能是用一个图片代替提交按钮 type="sunmit"
  3. 两个关键属性：disabled 禁用 readonly 只读，这两个属性都是不能修改的
  4. （1）select 多选表单，支持属性：size 显示的选项数量；multiple 允许多选； （2）option 多选项目，支持属性：selected 默认选中；value 供后台识别的选中项代号
  5. 文本域 textarea：cols="30" rows="10" 一般用css的width和height替代；placeholder 提示文字；默认value 不是通过value属性给出，而是写在标签内，因此注意标签代码中的空格
  6. 字段集 fieldset legend 就是提供一个比较特殊的边框组合样式，可通过CSS修改样式
<!-- 1. hidden 隐藏功能，一般是用于要带给后端的额个人信息，不面向客户端用户开放的内容 -->
<input type="hidden" name="" id="" value="带个后端的个人信息...">
<!-- 2. 图片按钮 - 功能是用一个图片代替提交按钮 type="sunmit" -->
<input type="image" src="./提交.png">
<!-- 3. 两个关键属性：disabled 禁用 readonly 只读，这两个属性都是不能修改的 -->
<input type="text" name="user_name" id="user_name" readonly>
<input type="text" name="user_sex" id="user_sex" disabled>
<!-- 
    4. select 多选表单，支持属性：
          size 显示的选项数量
          multiple 允许多选
       option 多选项目，支持属性：
          selected 默认选中
          value 供后台识别的选中项代号
-->
<select name="houseTool" id="houseTool" size="2" multiple>
    <option value="desk">桌子</option>
    <option value="sofa" selected>沙发</option>
    <option value="chair">椅子</option>
    <option value="chopsticks">筷子</option>
</select>
<!-- 5. 文本域 textarea
        cols="30" rows="10" 一般用css的width和height替代
        placeholder 提示文字
        默认value 不是通过value属性给出，而是写在标签内，因此注意标签代码中的空格
-->
<textarea name="comment" id="comment" placeholder="请输入你的意见"></textarea>
<!-- 6. 字段集 fieldset legend 就是提供一个比较特殊的边框组合样式，可通过CSS修改样式 -->
<fieldset>
    <legend>表单 - 字段集</legend>
    <input type="radio" name="destination" id="des_USA"><label for="des_USA">USA</label>
    <input type="radio" name="destination" id="des_UK"><label for="des_UK">UK</label>
</fieldset>

表单H5新增功能

type="新增属性"功能说明
color生成一个颜色选择的表单
tel唤起拨号盘表单
search搜索意义的表单
range滑动条表单
number数值表单
email限制用户必须输入email类型
url限制用户必须输入url类型，会提示输入网址
date可选择年月日
month可选择年月
week可选择年和第几周
datetime-local选择本地时间，可精确到年月日时分秒
time限制必须输入时间类型

数据列表/选项列表 datalist标签

数据列表是指当在搜索框输入一个字段的时候，在搜索框下方弹出显示的相关数据列表，与input结合使用。

<!-- input的list属性与datalist的id属性相关联 -->
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

表单H5新增属性

  • autofocus 属性：给文本框、选择框、或者按钮空间加上该属性，当打开网页时，该控件自动获得焦点，一个页面只起效一个
  • required 属性：验证输入不能为空
  • multiple 属性：可以输入一个或多个值，每个值之间用逗号隔开（邮箱常用）
  • pattern 属性：将属性值设置为某个格式的正则表达式，在提交时会检查内容是否符合规定格式 <input type="text" pattern="[0-9][A-Z]{3}" placeholder="格式要求：一个数字和三个大写字母" />

属性 maxlength

  • 功能：The maxlength attribute defines the maximum number of characters (as UTF-16 code units) the user can enter into an <input> or <textarea>. This must be an integer value 0 or higher.
<input type="password" maxlength="4" />

maxlength.gif

表单实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 如何更改 input 拾色器的外观*/  /* 火狐 不兼容*/
    /* ::-webkit-color-swatch-wrapper 设置拾色器的外层包括的边框带样式
     * input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;} 消除外边框带*/
    .input_color[type='color']::-webkit-color-swatch-wrapper{padding: 0;}
    /* ::-webkit-color-swatch  设置内层的边框(放置从拾色器选取的颜色)样式，颜色改变的地方
     * input[type='color']::-webkit-color-swatch {border:0;} 去掉剩下的黑色边框 */
    .input_color[type='color']::-webkit-color-swatch{border: 0;border-radius: 10px;}
</style>
</head>
<body>
<div style="display: flex;margin: 0 auto;flex-direction: row;align-items: center;justify-content: space-around;width:500px;">
    <input type="button" name="begin" value="enter the form" onclick="func_begin()" />
    <form action="index.html" method="get">
            <input type="search" name="search_res" placeholder="输入搜索关键字"/>
            <input type="submit" name="submit_search" value="&#128269;" style="border: none;">
    </form>
    <!--//事件onmousemove，鼠标在某个元素上移动时触发-->
    <input type="range" id="justify" name="justify" value="20" max="800" min="20" onmousemove="func_justify()"/>
    <input type="color" class="input_color" name="bgcolor" id="bgcolor" value="#f5f5f5" onchange="func_bgcolor()"
            style="border: 0;width: 50px;height: 15px; padding: 0;"  />
</div>
<form id="major_form" action="chart.html" method="get">
    <!-- 字段集：fieldset legend -->
    <fieldset id="field" disabled 
            style="width:500px;height: 20px;margin: 0 auto;line-height: 240%;background: whitesmoke;overflow: hidden;border-radius: 10px;">
        <legend style="font-family: STkaiti;text-align: justify;">个人信息</legend>
        <input type="text" name="your_name" placeholder="input your name" size="50" /><br/>
        <!--在移动端触屏移动端使用，用于唤起数字输入键盘，并不能限定只输入纯数字-->
        <input type="tel" name="telephone" placeholder="input 11 numbers" size="50" maxlength="11" required/>*<br/>
        <input type="email" name="mail" placeholder="input valid email" size="50" required="required"/>*<br/>
        <input type="password" name="pwd" size="50" maxlength="8" placeholder="input 8 points password" required/>*<br />
        <b style="font-size: 15px;">请选择生日</b>
        <input type="date" max="2018-12-31" /><br />
        <b style="font-size: 15px;">请选择性别</b>
        <input type="radio" name="sex" id="male" value="male" checked /><label for="male">男</label>
        <input type="radio" name="sex" id="female" value="female" /><label for="female">女</label><br />
        <b style="font-size: 15px;">请选择年级</b>
        <input type="checkbox" name="major" id="onelevel" value="onelevel" checked/><label for="onelevel">一级</label>
        <input type="checkbox" name="major" id="twolevel" value="twolevel" /><label for="twolevel">二级</label>
        <input type="checkbox" name="major" id="threelevel" value="threelevel" /><label for="threelevel">三级</label>
        <input type="checkbox" name="major" id="fourlevel" value="fourlevel" /><label for="fourlevel">四级</label><br />
        <input type="file" name="file" value='上传个人资料' size="50" multiple/><br />
        <b style="font-size: 15px;">请选择英语等级</b>
        <input type="number" name="englevel" step="2" max="8" min="4" value="4"/><br/>
        <b style="font-size: 15px;">请选择填表时间</b>
        <input type="time" name="input_time" id="input_time" value="18:56"/><br/>
        <b style="font-size: 15px;">请选择成果验收周</b>
        <input type="week" name="input_week" id="input_week" value="2018-W52"/><br />
        <b style="font-size: 15px;">请输入作品网页</b>
        <input type="url" name="page_url" id="page_url" placeholder="请输入网址" /><br/>
        <input type="hidden" id="reminder_text" name="reminder_text" size="60" style="text-align:center;height: 15px;border-radius: 50%;border: 0;" value="非常重要：注册成功后不能修改！" disabled></input><br />
        <input type="checkbox" id="confirm_reminder" name="confirm_reminder" hidden="hidden" required="required"/>
        <label for="confirm_reminder" id="confirm_reminder_label" hidden="hidden">确认提示</label>
        <input type="reset" value="重置" />
        <!--函数名不要设置得与变量名、id值、name值相同，否则容易报错-->
        <input type="submit" value="提交" onclick="reminder()"/>
    </fieldset>
</form>
</body>
</html>
<script>
//实现表格解封，开始输入
function func_begin(){
    //将fieldset里面的表单更改为能够使用（去掉disabled属性）
    document.getElementById('field').disabled = null
    //input[type='range']跳至最大
    document.getElementById('justify').value = document.getElementById('justify').max
    //表格自动展开至最大幅度
    document.getElementById('field').style.height = document.getElementById('justify').value + 'px'
}
//实现当调节range幅度时，自动调节表格的展开程度
function func_justify(){
    var jus = document.getElementById('justify').value
    document.getElementById('field').style.height = jus+'px'
}
//实现当点击input[type='color']时，自动调节表格内部的背景颜色
function func_bgcolor(){
    document.getElementById('field').style.background = document.getElementById('bgcolor').value
}
function reminder(){
    document.getElementById('reminder_text').type = 'text'
    document.getElementById('confirm_reminder').hidden = null
    document.getElementById('confirm_reminder_label').hidden = null
}
</script>

表单实例.png

avatar
文章
阅读
粉丝