form表单

form 标签 一般会和input标签连用

属性： action ----- 跳转的路径

<form action="demo1.html"  method="post" name="regester"><!--相对路径--><!--method用来选择隐藏用户名和密码 默认不隐藏  get不隐藏-->
    用户名: <input type="text" name="username"   >
    密码； <input type="password" name="password">
    <input type="submit">
    </form>

<form action="C:\Users\LEGION\Desktop\上课代码\第二天\demo1.html"   method="get"  name="regester"><!--绝对路径-->
用户名: <input type="text" name="username">
密码； <input type="password" name="password">
<input type="submit">
</form>

method ------ 用来明确表单提交的方式

（get post）默认值是get（不隐藏）post（隐藏

name ----- 表单的名称 get请求会把用户信息暴露在地址栏上

表单元素 

 input标签

type的取值： text ----- 文本框   password ---- 密码框   radio ----- 单选按钮   checkbox ---- 多选按钮   submit ------ 提交按钮   reset ----- 复位按钮   button ---- 普通按钮   image ----- 图像按钮 file ------ 文本域（上传文件的按钮） hidden ---- 隐藏域   email ------ 邮箱   color ---- 颜色域 date ----- 日期 time ----- 时间    datetime-local ----- 日期+时间   range ------ 进度条

<form action="">
    用户名: <input type="text" name="username" autofocus><br><!--tpye的取值 text文本框 password密码框-->
    密码； <input type="password" name="password"  required><br>
    单选 <input type="radio" value="男" name="gender" checked>男
        <input type="radio" value="女" name="gender" >女


        <p>
             多选
             <input type="checkbox" name="aihao">唱
             <input type="checkbox" name="aihao">跳
             <input type="checkbox" name="aihao">rap
             <input type="checkbox" name="aihao">篮球

        </p>
     <p>
        <input type="submit"><!--提交按钮-->
        <input type="reset"><!--复位按钮-->
        <input type="button" value="普通"><!--普通按钮-->
        <input type="image" scr=""><!--图片-->
        <input type="file"><!--上传文件-->
        <input type="hidden"><br><!--隐藏域-->
        填写邮箱<input type="email"><br>
        <input type="color"><br><!--颜色-->
        <input type="date"><br><!--日期-->
        <input type="time"><br><!--时间-->
        <input type="datetime-local"><br><!--包含日期时间-->
        <input type="range"><br><!--进度条-->   

 

input的属性：

 <!--
            input的性质
         disable 不可用
         autofocus 默认光标
         required 不能空白
         checked 默认选项
         readonly 只读不能写   
         value添加东西在框里
        -->

select标签

 下拉列表框 -------一般option标签进行连用

selected属性 ------ 默认被选中的选项

multiple="multiple" 属性 ------- 以列表形式显示

<form action="">
 <select name="" id=""  multiple="multiple"><!--默认选择--><!--以下拉列表显示列表显示-->
    <option value="">选项一</option> 
    <option value="">选项二</option> 
    <option value="">选项二</option> 
    <option value="">选项二</option> 
    <option value="">选项二</option> 
    <option value="">选项二</option> 
    <option value="" selected>选项三</option> <!--默认选择-->
    <option value="">选项四</option> 
    
 </select>

 

 

 textarea标签

用来实现文本域 cols="30" --------- 多少列，表示文本域的宽度 rows="10"-------- 多少行，表示文本域的高度

<textarea name="" id="" cols="30" rows="10"><!--c代表宽度，r代表长度-->

</textarea>