3.表单标签

最新推荐文章于 2019-08-13 22:14:41 发布

郭振澳

最新推荐文章于 2019-08-13 22:14:41 发布

阅读量282

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u011513939/article/details/74054590

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

表单

表单
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>