zoukankan      html  css  js  c++  java
  • 表单语法

     

    表单主要用来制作动态网页,方便和用户进行交互

    <form  method="post"action="result.html">
    
    

       <p>  名字:<input name="name" type="text" > </p>
    
    

       <p>  密码:<input name="pass" type="password" > </p>
    
    

       <p>
    	<input type="submit" name="Button" value="提交"/>
     	 <input type="reset" name="Reset" value="重填“/> 
         </p>
    	</form>
    
    

    post和get:规定如何发送表单数据常用值:get |post

    get:提交有限只能255个长度字符并且不安全

    post: 【安全

    action="result.html"表示向何处发送表单数据

    表单元素格式

    <input type="text" name="fname" value="text"/>

    属性说明
    type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text
    name 指定表单元素的名称
    value 元素的初始值。type 为 radio时必须指定一个值
    size 指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
    maxlength type为text 或 password 时,输入的最大字符数
    checked type为radio或checkbox时,指定按钮是否是被选中

    ​ 文本框

    <input type="text" name="userName" value="用户名" size="30" maxlength="20"/> text:文本框

    userName:文本框名称

    用户名:文本框初始值

    size:文本框长度

    maxlength:文本框可输入最多字符

    ​ 密码框password

    <input type="password " name="pass" size="20" /> type:密码框

    name:密码框名称

    size:密码框长度

    ​ 单选按钮radio

    <input name="gen"type="radio"value="男" checked />男

    <input name="gen"type="radio"value="女"/>女

    radio:单选按钮框

    value:值

    checked:单选按钮选中状态

    ​ 复选框:checkbox

    <input type="checkbox" name="interest"value="sports"/>运动

    <input type="checkbox" name="interest"value="talk" checked />聊天

    <input type="checkbox" name="interest"value="play"/>玩游戏

    checkbox:复选框

    checked:选中状态

    value:值

    ​ 列表框(下拉列表框)<select>和<option>

    <select name="列表名称"size="行数">

    <option value="选项的值"selected="selected">…</option>

    <option value="选项的值">…</option >

    </select>

    select:列表框

    selected:默认选中项

    option:选项

    ​ 按钮button、submit和reset

    <input type="reset"name="butReset"value="reset按钮">

    <input type="image" src="images/login.gif" />

    <input type="button " name="butButton" value="button按钮"/>

    rest:重置按钮

    reset按钮 :按钮上显示的文字

    images/login.gif:图片路径

    button:普通按钮

    ​ 多行文本域 textarea <textarea name="showText" cols="x" rows="y">文本内容 </textarea > textarea多行文本

    cols="x":显示的列数

    rows="y":显示的行数

    ​ 文件域

    <form action=""method="post" enctype="multipart/form-data">

    <p><input type="file"name="files" />

    <input type="submit" name="upload" value="上传"/></p>

    </form>

    file:文件域

    enctype="multipart/form-data":表单编码属性

    ​ 邮箱:email

    <p>邮箱:<inputtype="email" name="email"/></p>

    <inputtype="submit"/>

    email:邮箱

    ​ 网址url

    <p>请输入你的网址:<inputtype="url" name="userUrl"/></p>

    <inputtype="submit"/>

    url:网址

    ​ 数字number

    <p>请输入数字:<input type="number" name="num"min="0" max="100" step="10"/></p>

    <inputtype="submit"/>

    number:数字

    min:允许的最小值

    max:允许的最大值

    step:合法的数字间隔

    ​ 滑块range

    <p>请输入数字:<input type="range" name="range1"min="0" max="10" step="2"/></p>

    <inputtype="submit"/>

    range:滑块

    min:允许的最小值

    max:允许的最大值

    step:合法的数字间隔

    ​ 搜索框search

    <p>请输入搜索的关键词:<inputtype="search" name="sousuo"/></p>

    <inputtype="submit"/>

    search:搜索框

    ​ 隐藏域

    <input type="hidden" value="666" name="userid"> hidden: 隐藏域

    只读和禁用

    <input name="name"type="text" value="张三" readonly>

    <input type="submit" disabled value="保存">

    readonly:只读文本框

    disabled :禁用

    ​ 表单元素的标注

    优点:增强鼠标的可用性

    自动将焦点转移到与该标注相关的表单元素上

    <label for="id">标注的文本</label>

    <input type="radio"name="gender" id="male"/>

    表单元素的可用性

    for="id":表单元素的id

    id="male“:表单元素id

    注意:for的id一定要和input里的id一致

    表单初级验证:

    为什么要进行表单验证?

    1.减轻服务器的压力

    2.保证数据的可行性和安全性

    placeholder

    input类型的文本框提供一种提示(hint)

    可以描述文本框期待用户输入何种内容

    提示语默认显示,当文本框中输入内容时提示语消失

    适合于input标签:text、search、url、email和password等类型

    语法:

    <input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>

    required

    规定文本框填写内容不能为空,否则不允许用户提交表单

    适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型

    语法:

    <input type="text" name="username" required/> pattern

    用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单

    <input type="text" name="tel" required pattern= "^1[358]d{9}" />

    <>两端的汉语连接用span



  • 相关阅读:
    把git项目放到个人服务器上
    关于fcitx无法切换输入法的问题解决
    博客变迁通知
    (欧拉回路 并查集 别犯傻逼的错了) 7:欧拉回路 OpenJudge 数据结构与算法MOOC / 第七章 图 练习题(Excercise for chapter7 graphs)
    (并查集) HDU 1856 More is better
    (并查集 不太会) HDU 1272 小希的迷宫
    (并查集 注意别再犯傻逼的错了) HDU 1213 How Many Tables
    (最小生成树 Kruskal算法) 51nod 1212 无向图最小生成树
    (并查集) HDU 1232 畅通工程
    (最小生成树 Prim) HDU 1233 还是畅通工程
  • 原文地址:https://www.cnblogs.com/1314szh/p/13070477.html
Copyright © 2011-2022 走看看