zoukankan      html  css  js  c++  java
  • form 表单

    Form表单
    祖先级元素form 属性action 是表示提交地址
    Method表示提交方式(显式,隐式)
    Get用户输入的信息会显示在提交地址中,post提交地址中不会显示用户输入的内容。

    <form action=”#” method=”get/post”>
    子元素:
    用户名:<input type=”text” placeholder=”请输入” name=”username”>
    密码:<input type=”password” placeholder=”只输入数字和字母” name=”pwd”>
    手机号:<input type=”text” name=”mobile” maxlength=”11” pattern=””>
    性别:男<input type=”radio” name=”gender” value=”male”>
               女<input type=”radio” name=”gender” value=”female”>
    input输入框
    type选取输入框的类型
    name当前输入框内容的名称
    placeholder提示信息
    maxlength最大长度扩展:键值对pattern正则表达式(判断用户输入的内容是否符合规则)

    单选框操作步骤:
    Step1:type=“radio”
    Step2:name的值要相同
    由于单选框是用户选择的,而不是用户输入的,
    因此,要把相应的值也添加进来,以便进行提交,value表示值。

    多选框操作步骤(复选框):
    Step1:type=“checkbox”
    Step2:name的值要相同
    由于多选框是用户选择的,而不是用户输入的,
    因此,也相应的值进行提交。

    某一个值想要默认被选中,在input标签中添加checked。

    爱好:
    吃饭:<label for=”chifan”>吃饭</label>
                <input type=”checkbox” name=”hobby” value=”eat” id=”chifan”>
    Label标签与input标签相关联,label中的for值与input的id值相同。
    实现功能:页面中点击了label元素内容,可以自动激活或选中相关联的input标签。
    敲代码:<input type=”checkbox” name=”hobby” value=”code” required>
    Required表示此项为必填项,不填会有提醒


    下拉列表
    父元素:select
    子元素:option
    属性value是对应元素内容的值。
    <select name=”city” id=”city”>
       <option value=”CD”>成都市</option>
    <option value=”ZG”>自贡市</option>
    <option value=”DZ”>达州市</option>
    </select>
    提交按钮---<input type=”submit” 可设置value=”自定义:搜全部”>
    重置按钮---<input type=”reset”>
    普通按钮---<input type=”button” value=”普通按钮”>
    HTML5 提交按钮---<button>元素内容</button>

    Can I use  网站,可以查询标签适用的一些网站。
    如果设置必填项,在input中加入required属性。
    Textarea多行文本框,可换行输入。

    下拉列表进行分组,分组标签optgroup,显示在页面中的分组内容,需要添加到label值当中。
    <select name=”city” id=”Department”>
       <optgroup label=”市场部”>
         <option value=”HW”>户外</option>
    <option value=”WL”>网络</option>
       </optgroup>
    <optgroup label=”教学部部”>
         <option value=”XMJL”>项目经理</option>
    <option value=”BZR”>班主任</option>
       </optgroup>
    </select>

    身高/体重  <input type=”number” step=”5”(每次增加5) max=“30” min=”5”>
    年龄  <input type=”range”>
    邮箱  <input type=”mail”>
    手机  <input type=”tel”>

    扩展:
    Pattern正则表达式(判断用户输入的内容是否符合规则)
    手机(reg)<input type=”text” maxlength=”11” pattern=” 1 d{10}”>
    出生年月日<input type=”date” value=”2003-03-05”—设置默认值>
    请选择你喜欢的颜色<input type=”color”>

  • 相关阅读:
    linux的常用命令--pwd命令【持续补充ing】
    linux的常用命令--cp命令【持续补充ing】
    linux的常用命令--mkdir【持续补充ing】
    linux的常用命令--su篇【持续补充ing】
    linux的常用命令--ls篇【持续补充ing】
    linux的常用命令--cd篇【持续补充ing】
    【SQL Server 2008数据库基础篇】常用关键字、数据类型和常用语法
    SpingBoot之多Profile文件
    SpringBoot之YAML
    SpringBoot之HelloWorld仔细分析
  • 原文地址:https://www.cnblogs.com/-xmj/p/10591257.html
Copyright © 2011-2022 走看看