3.表单标签

来源：互联网发布：伴奏升调降调软件编辑：程序博客网时间：2024/06/11 16:20

表单

表单
form
   action 将表单传送到哪里文件
   method
      post 隐蔽传输安全性高效率低传输大小无限制(根据服务器的处理能力) 增删改操作
      get url传输安全性低效率高传输大小 < 2K 查询操作

 **  注意点: 可手动输入的表单 name必须写,  value 是可写可不写             不可手动输入     name必须写,  value 必须写**

input
  type
      文本域 text
      密码域 password
      单选 radio
      复选 checkbox
      邮箱 email
      搜索 search
      数字 number
      网址 url
      日期 date
      文件 file
      隐藏 hidden
      提交 submit
      重置 reset
      自定义 button
      图片提交image

textarea 多文本
rows 行
cols 列

select 下拉框
  option 下拉子选项
  optgroup
    label 组名

常见属性
    默认背景字         placeholder
    最大长度         maxlength
    最小长度         minlength
    自动提示         autocomplete
    自动获取焦点         autofocus
    只读         readonly
    禁用         disabled
    单/复选         checked
    下拉默认         selected
    不能为空         required
    多选         multiple file 和 select

例子：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>表单标签</title></head><body>    <!--         表单            form                action    将所有的表单送到这action去                method                    get   url传输   安全性低 执行效率高 传输大小 < 2KB                    post  隐蔽传输  安全性高 执行效率低 传输大小 无穷大(服务器的处理能力)                        get: 查询数据                        post: 增删改数据                enctype=                    'multipart/form-data'   上传文件必须加上去            1KB = 1024B            1MB = 1024KB            1GB = 1024MB            1TB = 1024GB            ...            input   type                text        文本域                password    密码域                         radio       单选按钮  checked  默认勾选                checkbox    复选按钮  checked  默认勾选                email       邮箱按钮                date        日期                number      数字                search      搜索                url         网址                file        文件  如果是要上传文件, form必须加 enctype='multipart/form-data'                hidden      隐藏域                submit      提交                reset       重置                button      自定义按钮                   image       图片按钮            select    下拉框   multipart                    option    下拉子选项                optgroup   下拉组                    label  组名            textarea  多文本域                name                 rows  行数                cols  列数            常见属性                placeholder  默认背景字                minlength    最小长度                maxlength    最大长度                autocomplete 自动提示   on开  off关                checked      单/复选 默认选项                selected     下拉默认选项                required     不能为空                autofocus    自动获取焦点                readonly     只读                disabled     禁用                multiple     select 多选选项    file 多选文件     -->    <h1> 个人资料 </h1>    <form action='3.php'  enctype='multipart/form-data'>        <input name="">        帐户:<input type="text" name="user" placeholder='邮箱/手机' maxlength='11' autocomplete='off'> <br><br>        密码:<input type="password" name="pwd"  minlength='6' required> <br><br>        性别:            <label><input type="radio" name="sex" value='m'>男</label>            <label><input type="radio" name="sex" value='w'>女</label>            <label><input type="radio" name="sex" value='ry' checked>人妖</label><!--加个label可以点击字选择，多选按钮也是一样-->            <br><br>         爱好:            <input type="checkbox" name="hobby[]" value='bc' checked>飚车            <input type="checkbox" name="hobby[]" value='bm'>把妹            <input type="checkbox" name="hobby[]" value='cartoon'>动漫            <input type="checkbox" name="hobby[]" value='poem'>内涵段子            <input type="checkbox" name="hobby[]" value='tj'>特交            <input type="checkbox" name="hobby[]" value='film'>看电影            <br>            <br>         籍贯:            <select name='sheng'>                <option value='sh'>上海</option>                <option value='js'>江苏</option>                <option >浙江</option>                <option>广东</option>                <option>北京</option>                <option>四川</option>            </select>            <select name='shi'>                <optgroup label='江苏'>                    <option>南京</option>                    <option>苏州</option>                    <option>无锡</option>                    <option selected>常州</option>                    <option>连云港</option>                </optgroup>            </select>            <br>            <br>         邮箱: <input type="email" name="email" autofocus>         <br>         <br>         生日: <input type="date" name="birthday">         <!--    2e3    2*10*10*10 -->         价格: <input type="number" name="price" readonly value='123'>           搜索: <input type="search" name="" disabled value='www.baidu.com'>          网址: <input type="url" name="">            <br>            <br>         头像: <input type="file" name="touxiang" >            <br>            <br>         隐藏域: <input type="hidden" name="" value=''>            <br>            <br>         自我介绍:<textarea name='zwjs' rows=5 cols='40'></textarea>            <br>            <br>         <input type="submit" value='登录'>         <input type="reset" value='重来一边'>         <input type="button" value='自定义按钮'>         <input type="image"  src='../dxj.jpg'>    </form></body></html>

阅读全文

0 0