HTML中的基本表单属性以及H5中新增表单元素与属性

1.form表单:

        表单就是专门用来收集用户信息的

2.什么是表单元素?

        表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能

3.表单的格式:

<form action="提交的服务器接口地址">
    <表单元素>
</form>

        注意:表单元素一定要写在表单中

4.常见的表单元素

4.1 input标签
	input标签有一个type属性, 这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观的不同
    明文输入框 <input type="text" name="account" placeholder="请输入用户名">
	name:表单提交时,会作为参数的名称,结合输入的值进行匹配,组成 参数名=参数值的结构
	placeholder:提示
    暗文输入框 
	<input type="password" name="password" placeholder="请输入密码">
    输入框设置默认值 
	<input type="xxx" value="xxx">
    单选框 
	<input type="radio" name="xx" value="xxx">
      注意点:
      1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。
      2.要想让单选框默认选中某一个, 那么可以给input标签添加一个checked属性。
      3.单选框的value值,才是我们最终需要的值,并不是单选框显示的值。
    多选框 
	<input type="checkbox" name="xxx" value="xxx">
       多选框默认选中 checked
    提交按钮 
	<input type="submit">
      作用: 将表单中已经填写好的数据, 提交到远程服务器
      注意点:
      要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
      1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
      2.需要给需要提交到服务器的表单元素添加一个name属性
        enctype
           application/x-www-form-urlencoded   
            查询字符串,在发送前编码所有字符(默认),转换为?a=a&b=b&c=c

            multipart/form-data 
              不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
              -附件上传 <input type="file">
                  method="POST"
                  enctype="multipart/form-data"

            text/plain   
            	用于发送纯文本内容,空格转换为 "+" 加号,不对特殊字符进行编码,一般用于
4.2 email之类的:		
    普通按钮 
	<input type="button" value="xxx">
      可以通过value属性来给按钮指定标题
      作用: 配合JS完成一些操作
    图片按钮 
		<input type="image" src="">
       作用: 配合JS完成一些操作
	
    重置按钮 
	<input type="reset" value="xx">
      作用: 用于清空表单中已经填写好的数据
      注意点:
      如果想想改重置按钮默认的按钮标题可以通过value属性来修改
    隐藏域 
	<input type="hidden" name="xx" value="xxx">
        隐藏域
        作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器

4.3 label标签
  1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
  2.要想让输入框和文字绑定在一起, 那么我们可以使用label标签
  3.绑定的格式:
      3.1将文字利用label标签包裹起来
      3.2给输入框添加一个id属性
      3.3在label标签中通过for属性和输入框中的id进行绑定即可
        <label for="account">
          账号:
        </label>
        <input type="text" id="account">

4.4 select标签
  作用: 用于定义下拉列表
  格式:
  <select>
      <optgroup label="分组名称">
          <option>列表数据</option>
      </optgroup>
  </select>
  注意点:
  1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
  2.可以通过给option标签添加一个selected属性来指定列表的默认值
  3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

4.5 textarea标签
  作用: 定义一个多行输入框
  格式:
  <textarea>
  </textarea>
  注意点:
  1.默认情况下输入框可以无限换行
  2.默认情况下输入框有自己的宽度和高度
  3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
  4.默认情况下输入框是可以手动拉伸的
4.6 fieldset组件
  fieldset组件用于在一个web表单中对多个控件和标签进行分组
  格式:
  <form action="">
      <fieldset>
        <legend>请登录</legend>
        账号:<input type="text"><br>
        密码:<input type="password">
        <input type="submit">
      </fieldset>
  </form>

5.H5新增表单元素和属性

h5表单新增表单元素
    

<body>
    <form action="xxx.php">
        <!-- 进度条 -->
        <progress value="70" max="100"></progress>
        <!-- 滑块 -->
        <input type="range" min="0" max="100" step="10" value="20" name="" id="">
        <!-- 对邮箱校验 -->
        <input type="email" placeholder="请输入邮箱" name="" id="">
        <!-- 对电话校验 配合正则表达式 pattern-->
        <input type="tel" pattern="1[2-9]{10}" name="" id="">
        <!-- 对url校验 -->
        <input type="url" name="" id="">
        <!-- 取色器 -->
        <input type="color" autofocus name="" id="">
        <!-- 日期 -->
        <input type="date" name="" id="">
        <!-- 日期时间 -->
        <input type="datetime-local" name="" id="">
        <!-- number 数字校验 -->
        <input type="number" name="" id="">
        <!-- 以上都是h5新增表单元素 -->
        <!-- 给输入框绑定待选项 datalist  id属性和input  list属性要一致 -->
        <input type="text" list="input" name="" id="">
        <datalist id="input">
            <option>周一</option>
            <option>周二</option>
            <option>周三</option>
        </datalist>
        <input type="submit" value="提交">
        <input formnovalidate formaction="text.php" formenctype="multipart/form-data" method="get" type="submit" value="提交按钮2">
    </form>

</body>


   h5新增表单属性 
            min 最小值
            max 最大值
            step 步幅
            pattern 正则匹配
            autofocus  自动聚焦
            required 必填项
            placeholder 提示内容
            formaction 表单提交地址
            formenctype 表单提交的数据格式 查询字符串 纯文本 附件
            formmethod 提交表单的方式  get post
            formnovalidate 不校验表单 提交按钮
            list与datalist进行待选项绑定

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值