2019-04-17表单

2019-04-29  本文已影响0人  果冻_4c9b
    form 表单
        一切与数据交互相关的
             action:提交数据路径(java类)
             method:提交方式 
                get:会把请求参数拼写在url的末尾,用问号链接一key=value1&key=value2的形式
                    用于查询情况非常常见,因为明文,所以有安全隐患但是效率比较高,有限长度1k           
               post:把请求参数放在请求体中,不是明文,用于增删改较多,安全有保障,长度无限   
        表单控件:
                      input
                      name属性   表单控件的名字,与数据交互有关,很重要的属性
                      value属性   表单控件的值,与数据交互有关
                      type属性
                      text 文本输入框
                      password密码输入框
                      submit提交 将文本框中内容提交到指定的action
                      reset重置按钮
                      button自定义按钮
                      radio 单选框  value 值
                      checked默认选中
                      checkbox 复选框 value  name相同传在一个数组
                      checked默认选中
                      hidden 隐藏域 提交不需要显示的东西
                select下拉框
                     option
                  一般常见属性
                    placeholder="用户名"占位
                    maxlength最大长度
                    readonly 只读
                        disabled 禁用
 <!DOCTYPE html>
    <html>
     <head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    
    <form action="https://www.baidu.com/s"  method="get">
        <p><label for="username">用户</label><input type="text" id="username" name="wd" placeholder="用户名"/></p>
        <!-- 密码框 -->
        <p>密码<input type="password" maxlength="6" /></p>
        <p>email:<input type="email"></p>
        <p>生日:<input type="date"></p>
        <!-- 有submit功能的图片 -->
        <p><input type="image"src="../20190402/img/a1.jpg" ></p>
        <!-- 隐藏域 -->
        <p><input type="hidden" value="119"></p>
        <!-- 文件域-->
        <p><input type="file"> </input></p>
        <p><input type="submit" /></p>
        <p><input type="reset" value="重置按钮" /></p>
        <p><input type="button"  value="自定义按钮" /></p>
        <!-- button -->
        <!-- 默认是submit -->
        <button >提交</button>
        <button type="reset">重置按钮</button><br>
        <input type="radio" name="sex" value="1" checked="">男
        <input type="radio" name="sex" value="2">女
        <p>
        <input type="checkbox" name="hobby" value="篮球">篮球   
        <input type="checkbox" name="hobby" value="足球">足球       
        <input type="checkbox" name="hobby" value="台球">台球           
        </p>
        <!-- 下拉框-->
        <select>
            <option value ="">辽宁</option>
            <option value ="" selected="">大连</option>
            <option value ="">北京</option>
        </select>
        <p>
            <textarea rows="10" cols="110" style="resize: none;"></textarea>    
        </p>
        </form>
</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读