1.为什么需要表单
表单是为了 收集用户信息。


2.表单的组成
在HTML中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息,3个部分组成。
(1)表单域
在html中,<form>标签用于定义表单域,以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form action="ul地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
属性 属性值 作用
action ul地址 用于指定接收并处理表但是据服务器程序url地址
method get/post 用于设置表单数据的提交方式,其取值为get或post
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域
(2)表单控件(表单元素)【input  select  textarea】
表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单输入或选择的内容
控件
  1_input 输入表单元素
       在<input>标签中,包含一个type属性,根据不同的type属性,输入字段拥有很多形式
      (可以是文本字段,复选框,掩码后的文本控件,单选按钮,按钮等)。
       <input type = "属性值" />
         (1)input是一个单标签
                 1.type属性设置不同的属性值用来指定不同的控件类型
                     属性值:
                      text 文本框,用户输入文本,默认宽度为20个字符
                      password 定义密码字段,该字段的字符被掩码
                      radio 定义单选按钮
                      checkbox 定义复选框
                      submit 定义提交按钮,按钮会把表单数据传送给服务器
                      reset 重置按钮,重置所有数据
                      button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
                      file 定义输入字段和“浏览”按钮,供文件上传
                  2.name 由用户自定义 定义input元素名称
                  3.value 由用户定义 规定input元素的值
                  4.checked checked 规定input元素首次加载时被选中
                  5.maxlength 正整数 规定输入字符串最大长度
                   注意:1.name和value是每个表单元素都有的属性值,主要给后台人使用
                              2.name指表单元素的名字,要求单选按钮和复选按钮要有相同的name值
                              3.checked属性主要针对对于单选框和复选框,主要作用一打开页面,就可以默认选中某个表单

               (2)<label>标签
                <label>标签为input元素定义标注(标签)。
               <label>标签用于绑定一个表单元素,当点击<label>标签内文本的时候,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户的体验
               <label for="sex">男<label>
               <input type="radio" name="sex" id="sex">
    2_select 下拉表单元素
          在页面中,如果多个选项让用户选择,并且想要节约页面空间,我们可以使用<select>标签控件定义下拉标签
          语法:
          <select>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            ...
         <select>
         注意:<select>中至少含有一堆<option>
         <option>中定义selected = "selected"时,当前项即为默认选项
    3_textarea 文本域元素
         使用场景:当用户输入内容较多时,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签
         在表单元素中,<textarea>标签用于定义多行文本输入的控件。
         <textarea row="3" cols="20">
          文本内容
          </textarea>
          重点注意:1.通过<textarea>标签可以轻松创建多行文本输入框
                            2.cols = "每行的字符数",rows="显示的行数",我们在实际开发中不会使用,都是CSS来改变大小。

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/qiujie-prion/p/12963992.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!