HTML 表单(form)

HTML 表单用于搜集不同类型的用户输入。
表单是一个包含表单元素的区域

计算机中存储的最小单位为字节。每一个字节中存的就是0/1。

    英文,符号 = 8个字节

    汉字 = 16个字节 2bit

    1GB = 1024MB

    1MB = 1024KB

    1KB = 1024bit

    1bit = 8字节

    表单:收集不同类型的用户输入信息。

      输入框,密码框,文本域 下拉菜单,单选,多选。

    form标签:

      作用:定义一个表单。

                                    <form action="">内容</form>

      一个表单是由表单元素组成的。

        标签:只是说开始标签与结束标签。

        元素:在HTML中,从开始标签到结束标签的所有代码统称为一个元素。

        表单元素:不同类型的input元素 以及 单选框,提交按钮等。 

属性:

      action:提交的地址

      method:提交的方式

        get: 参数是在url中的,不安全,传输量比较少,不大于2KB。 默认是get

        post: 参数不在url中,相对比较安全。传输量没有限制。不过,服务器可能会对你传输的数据量进行

   input

      type:input元素的类型。会根据type的不同,呈现为不同的控件。

      name:提交的数据的名字    

    输入框

      type=text

      作用:创建一个允许用户输入的输入框。

      value:未输入之前的默认文本。

      placeholder:提示文本。

      maxlength:输入框最大输入字符长度。

      minlength:输入框最小的输入字符长度。

      autofocus:自动获取焦点   不需要书写属性值。

    密码框

      password

                                  密码:<input type="password">

    

    单选

      radio

      属性:

        name:如果不设置name属性,浏览器不知道哪些单选框是一组,就不能起到单选的效果。我们需要给同一组的单选框添加一个相同的name属性值。

        checked:可以忽略属性值,表示当前单选默认选中。

        disabled 禁用 不仅仅是单选可用,别的input元素也可以使用。

            性别:<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女<input type="radio" name="sex" disabled>未知

    多选

      checkbox

      name是必填项。而且同一组的多选框的name值必须相同。

    按钮:

      value属性:按钮上的文字

      普通按钮

        button 配合js完成一些操作。

      提交按钮

        submit 将表单中的数据提交。

      重置按钮

        reset 重置表单中的数据

<input type="submit" value="立即注册">

下拉列表

select:

作用:定义一个下拉列表。

option:

作用:定义一个下拉选项。

格式:

    <select>

       <option>...</option>

       <option>...</option>

     </select>

 select常用属性:

     size:显示的下拉选项的个数

     multiple 不需要写属性值,它表示多选。(多选时需要按住ctrl)

    option属性:  

     selected:默认选中、

  注意点:

     option标签不是一个块级元素,只能放置文本。

<form action="">

     <select size="1" >

       <option>1</option>

       <option>2</option>

       <option>3</option>

       <option>4</option>

       <option selected>5</option>

       <option>6</option>

     </select>

   </form>


 

猜你喜欢

转载自blog.csdn.net/JLX981314/article/details/114898760