708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post

表单

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


常用元素

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


input的常用属性

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


布尔属性(boolean attributes)

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


按钮

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


按钮 - button元素

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


input和label

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


radio的使用注意

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


checkbox的使用注意

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


去除input的Tab键选中效果

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


textarea

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


select和option

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


fieldset和legend

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


form的常用属性

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


get和post

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


get请求

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


post请求

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post


10_表单_相关元素综合演练-label.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      /* css reset: 了解 */
      /* body, ul {
            margin: 0;
            padding: 0;
        } */

      ul {
        list-style: none;
      }

      input,
      textarea {
        outline: none;
      }

      textarea {
        resize: none;
      }

      /* 真正样式的css */
      fieldset {
        width: 400px;
      }

      input,
      textarea {
        outline: none;
      }

      input:focus,
      textarea:focus {
        border-color: #4791ff;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>必填信息</legend>
        <!-- 1.手机输入框 -->
        <div>
          <label for="phone">手机:</label>
          <!-- 【tabindex:按tab键,不能选中。】 -->
          <input type="text" maxlength="11" placeholder="请输入您的手机号" autofocus name="phone" tabindex="-1" />
        </div>

        <!-- 2.密码输入框 -->
        <div>
          <label for="password">密码:</label>
          <input type="password" id="password" />
        </div>

        <!-- 3.验证码输入框 -->
        <div>
          <label for="validate">验证码:</label>
          <input type="text" id="validate" />

          <!-- 3.1.button实现方式一: button -->
          <!-- <button>获取验证码</button> -->

          <!-- 3.2.button实现方式二: input-->
          <input type="button" value="获取验证码" disabled />
        </div>
      </fieldset>

      <fieldset>
        <legend>选填信息</legend>

        <!-- 4.照片选择 -->
        <div>
          <label for="photo">照片:</label>
          <input type="file" id="photo" />
        </div>

        <!-- 5.性别选择 -->
        <div>
          <span>性别:</span>
          <!-- 【2个name属性的值必须一样,才能互斥。】 -->
          <label for="male">男</label>
          <input type="radio" name="sex" id="male" checked />
          <label for="female">女</label>
          <input type="radio" name="sex" id="female" />
        </div>

        <!-- 6.爱好选择 -->
        <div>
          <span>爱好:</span>
          <!-- 【属于同一种类型的checkbox,name值要保持一致。】 -->
          <label for="sing">唱歌</label>
          <input type="checkbox" name="hobbies" id="sing" checked />
          <label for="jump">跳舞</label>
          <input type="checkbox" name="hobbies" id="jump" />
          <label for="rap">rap</label>
          <input type="checkbox" name="hobbies" checked id="rap" />
          <label for="basketball">篮球</label>
          <input type="checkbox" name="hobbies" id="basketball" />
        </div>

        <!-- 7.学历 -->
        <div>
          <span>学历:</span>
          <!-- 【multiple:可以选中多个。】 -->
          <select name="education" id="" multiple>
            <!-- 【?education=value值,小学是给用户显示出来的但是不会提交到服务器,value会提交到服务器】 -->
            <option value="0">小学</option>
            <option value="1">初中</option>
            <!-- 【默认选中高中。】 -->
            <option value="2" selected>高中</option>
            <option value="3">大专</option>
          </select>
        </div>

        <!-- 8.简介 -->
        <div>
          <label for="introduce">简介:</label>
          <!-- 【最多显示5行、20个字符。】 -->
          <textarea cols="20" rows="5" id="introduce"></textarea>
        </div>
      </fieldset>

      <!-- 9.重置按钮 -->
      <!-- 
        前提:
            1.前提一:type必须是reset类型(value值可以不写)
            2.前提二: 所有的内容都必须在同一个表单中(form)
      -->
      <input type="reset" />
    </form>
  </body>
</html>

10_表单_相关元素综合演练.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      fieldset {
        width: 400px;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>必填信息</legend>
        <!-- 1.手机输入框 -->
        <div>
          <span>手机:</span>
          <input type="text" maxlength="11" placeholder="请输入您的手机号" autofocus name="phone" />
        </div>

        <!-- 2.密码输入框 -->
        <div>
          <span>密码:</span>
          <input type="password" />
        </div>

        <!-- 3.验证码输入框 -->
        <div>
          <span>验证码:</span>
          <input type="text" />

          <!-- 3.1.button实现方式一: button -->
          <!-- <button>获取验证码</button> -->

          <!-- 3.2.button实现方式二: input-->
          <input type="button" value="获取验证码" disabled />
        </div>
      </fieldset>

      <fieldset>
        <legend>选填信息</legend>

        <!-- 4.照片选择 -->
        <div>
          <span>照片:</span>
          <input type="file" />
        </div>

        <!-- 5.性别选择 -->
        <div>
          <span>性别:</span>
          男<input type="radio" name="sex" checked /> 女<input type="radio" name="sex" />
        </div>

        <!-- 6.爱好选择 -->
        <div>
          <span>爱好:</span>
          唱歌<input type="checkbox" name="hobbies" checked /> 
          跳舞<input type="checkbox" name="hobbies" /> 
          rap<input type="checkbox" name="hobbies" checked />
          篮球<input type="checkbox" name="hobbies" />
        </div>

        <!-- 7.学历 -->
        <div>
          <span>学历:</span>
          <select name="education" id="">
            <option value="0">小学</option>
            <option value="1">初中</option>
            <option value="2" selected>高中</option>
            <option value="3">大专</option>
          </select>
        </div>

        <!-- 8.简介 -->
        <div>
          <span>简介:</span>
          <textarea cols="20" rows="5"></textarea>
        </div>
      </fieldset>

      <!-- 9.重置按钮 -->
      <!-- 
            前提:
                1.前提一:type必须是reset类型(value值可以不写)
                2.前提二: 所有的内容都必须在同一个表单中(form)
        -->
      <input type="reset" />
    </form>
  </body>
</html>

11_表单_按钮的实现方式.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="http://www.baidu.com">
      <input type="text" name="username" />

      <!--1.方式一: input实现 -->
      <div>
        <!-- 普通按钮 -->
        <input type="button" value="按钮" />
        <!-- 重置按钮 -->
        <input type="reset" />
        <!-- 表单提交 -->
        <input type="submit" />
      </div>

      <!--2.方式二: button实现 -->
      <!-- 注意: button type属性默认值submit -->
      <div>
        <!-- 普通按钮 -->
        <button type="button">按钮</button>
        <!-- 重置按钮 -->
        <button type="reset">重置</button>
        <!-- 表单提交(submit是默认值) -->
        <button type="submit">提交</button>
      </div>
    </form>

    <!-- 3.模拟百度 -->
    <form action="http://www.baidu.com/s">
      <input type="text" placeholder="请输入搜索的关键字" name="wd" />
      <input type="submit" value="百度一下" />
    </form>
  </body>
</html>

12_表单_input和label的关系.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <label for="phone">手机:</label>
      <input type="text" id="phone" />
    </div>

    <div>
      <label for="password">密码:</label>
      <input type="password" id="password" />
    </div>

    <div>
      <span>性别:</span>
      <label for="male">男</label>
      <input type="radio" name="sex" id="male" />
      <label for="female">女</label>
      <input type="radio" name="sex" id="female" />
    </div>

    <div>
      <span>爱好:</span>
      <label for="basketball">篮球</label>
      <input type="checkbox" name="sex" id="basketball" />
      <label for="rap">rap</label>
      <input type="checkbox" name="sex" id="rap" />
    </div>
  </body>
</html>

13_表单_input去除外边框.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      /* css的重置效果 */
      input {
        outline: none;
      }

      /* 自己加边框 */
      input:focus {
        border-color: #4791ff;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

14_表单_textarea属性和样式.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      textarea {
        resize: none;
      }
    </style>
  </head>
  <body>
    <textarea cols="30" rows="10"></textarea>
  </body>
</html>

15_表单_select和option演练.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- multiple/size/selected属性 -->
    <select name="education" id="" multiple>
      <option value="0">小学</option>
      <option value="1">初中</option>
      <option value="2" selected>高中</option>
      <option value="3">大专</option>
    </select>
  </body>
</html>

16_表单_表单提交相关的演练.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      /* css reset: 了解 */
      /* body, ul {
            margin: 0;
            padding: 0;
        } */

      ul {
        list-style: none;
      }

      input,
      textarea {
        outline: none;
      }

      textarea {
        resize: none;
      }

      /* 真正样式的css */
      fieldset {
        width: 400px;
      }

      input,
      textarea {
        outline: none;
      }

      input:focus,
      textarea:focus {
        border-color: #4791ff;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <form action="http://www.baidu.com" method="POST" enctype="multipart/form-data">
      <fieldset>
        <legend>必填信息</legend>
        <!-- 1.手机输入框 -->
        <div>
          <label for="phone">手机:</label>
          <input type="text" maxlength="11" placeholder="请输入您的手机号" autofocus name="phone" tabindex="-1" />
        </div>

        <!-- 2.密码输入框 -->
        <div>
          <label for="password">密码:</label>
          <input type="password" id="password" name="password" />
        </div>

        <!-- 3.验证码输入框 -->
        <div>
          <label for="validate">验证码:</label>
          <input type="text" id="validate" name="code" />

          <!-- 3.1.button实现方式一: button -->
          <!-- <button>获取验证码</button> -->

          <!-- 3.2.button实现方式二: input-->
          <input type="button" value="获取验证码" disabled />
        </div>
      </fieldset>

      <fieldset>
        <legend>选填信息</legend>

        <!-- 4.照片选择(文件上传) -->
        <div>
          <label for="photo">照片:</label>
          <input type="file" id="photo" name="photo" />
        </div>

        <!-- 5.性别选择 -->
        <div>
          <span>性别:</span>
          <label for="male">男</label>
          <!-- 【通过value属性值区分提交给服务器的数据。】 -->
          <input type="radio" name="sex" id="male" value="male" checked />
          <label for="female">女</label>
          <input type="radio" name="sex" id="female" value="female" />
        </div>

        <!-- 6.爱好选择 -->
        <div>
          <span>爱好:</span>
          <label for="sing">唱歌</label>
          <!-- 【通过value属性值区分提交给服务器的数据,所有的value会保存在数组里。】 -->
          <input type="checkbox" name="hobbies" id="sing" value="sing" checked />
          <label for="dance">跳舞</label>
          <input type="checkbox" name="hobbies" id="dance" value="dance" />
          <label for="rap">rap</label>
          <input type="checkbox" name="hobbies" checked id="rap" value="rap" />
          <label for="basketball">篮球</label>
          <input type="checkbox" name="hobbies" id="basketball" value="basketball" />
        </div>

        <!-- 7.学历 -->
        <div>
          <span>学历:</span>
          <select name="education" id="" multiple>
            <option value="0">小学</option>
            <option value="1">初中</option>
            <option value="2" selected>高中</option>
            <option value="3">大专</option>
          </select>
        </div>

        <!-- 8.简介 -->
        <div>
          <label for="introduce">简介:</label>
          <textarea name="intro" cols="20" rows="5" id="introduce"></textarea>
        </div>
      </fieldset>

      <!-- 9.重置按钮 -->
      <!-- 
        前提:
          1.前提一:type必须是reset类型(value值可以不写)
          2.前提二: 所有的内容都必须在同一个表单中(form)
      -->
      <input type="reset" />

      <!-- 10.进行表单提交 -->
      <input type="submit" />
    </form>
  </body>
</html>



708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post

上一篇:Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient


下一篇:HTTP 流程