html表单和常用属性

表单

1、单选框

  • 1、name属性,规定一组选项,着一组中只能选择一个,单选input类型是radio
  • 2、label标签,是点击文字也可以选中,其中有个for属性,需要在input中设置id,然后在for属性中填写这个id
        <div>你的性别</div>
        <div>
            <input type="radio" name="bbb" id="man" checked>
            <label for="man">男</label>
        </div>
        <div>
            <input type="radio" name="bbb" id="woman">
            <label for="woman">女</label>
        </div>
  • 3、checked属性,加上这个属性以后就是默认选中的意思,也就是单选中一组只能加一个,属性值等于checked时,值可以省略。
  • 一个选项用一个div包裹。

2、复选框(多选)

  • 1、复选框类型是checkbox
  • 2、默认选择checked,可以加多个
  • 3、label标签一样的

3、上传文件

  • 1、上传文件的框input类型是file,可以将文件上传并且暂时保存。
  • 2、提交按钮,用图片实现提交,可以用input类型为image的形势实现。
    <div>
        <div><h2>上传图片按钮-代替提交按钮</h2></div>
        <div>
            <input type="image" src="提交按钮图片路径">
        </div>
    </div>
  • 3、提交要在form中实现,向后端提交信息。
  • 4、隐藏的按钮:input类型为hidden,用的还是比较多的,不是给普通用户看的,而是给后端看的,存储用户信息,属性value存储的就是传递给后端的个人信息。

4、禁用、只读

  • 1、禁用:可以对按钮或者input标签设置disabled属性,值为disabled,则按钮禁用
  • 2、只读:readonly,可以聚焦,不能修改。

5、下拉菜单

  • select标签:嵌套option标签,option是选项,select属性size,作用是规定下拉菜单中能够展示几个选项,放不开的撑开滚动条。
  • 下拉菜单多选,加上multiple属性,可以用crtl加上鼠标进行多选
  • option属性,value是提供给后端所需要的值。
  • 默认选中,selected属性加到option标签上就行了,没有用multiple属性时不能用在多个选项身上。用了multiple属性可以规定多个选项有selected

6、文本域

文本域是一个多行文本输入框

  • 1、cols:列,rows:行,一般不用,而且这两个变量只针对英文字符,汉字不适用。可以用css样式对文本框大小进行改变。
  • 2、placehoder预置文本,提示文字。
  • 3、textarea标签之间不能换行,避免将换行符设置能默认文本。
  • 4、控制其不能扩大,在css中添加属性resize:vertical(垂直方向可以改变)(horizontal是水平方向可以改变,垂直不能改变,both是水平垂直都能改变,none都不能改变)。重新设置大小
  • 5、和input的区别,input是单行文本输入框,textarea是多行文本的。

7、字段集

  • 1、字段集是一个表单标签,用来包裹一个表单或者一个类型的选择,可以规定缺口,缺口内写入表单的内容。
  • 2、具体形式
<h1>字段集</h1>
    <div>
        <fieldset>
            <legend>性别</legend>
            <input type="radio" name="a">男
            <input type="radio" name="a">女
        </fieldset>
    </div>
  • 3、fieldset就是字段集的标签,legend是规定的缺口,后边的汉字是缺口内的文字,再下边是字段集中的内容。
  • 4、改变框的颜色,可以叠用css样式,设置边框就行,所有的样式都可以使用。

8、h5新增内容

  • 1、 新增语义化标签
    • 定义:看到标签就直到它是干啥的!!方便爬虫的辨识,h1,b等标签可以具有强调作用,方便辨识。
    • 各个部分的名称
      (1)头部header:页面的标题
      (2)内容区块section
      (3)artical与上下文无关的独立的内容
      (4)aside:在artical之外的补充内容
      (5)footer:页面中的一个内容区块或整个页面的脚注。
      (6)nav:表示页面中导航连接部分。
      (7)figure:独立的流内容,适用figcaption元素为其添加标题。
      (8)main:主要内容。
    • 实质:其实就是变了名字的div
    • 注意,在标签中适用calc函数时,运算符号左右必须加空格,不然会出现无效的问题。
    • artical是独立的一部分,它其中可以有自己的header和footer
  • 2、音频和视频
    • flash不用了,开始用h5,在网页中可以放音视频
    • 音频标签为audio,几个属性,一个是src路径,一个是controls,值可以省略,是一个音频控制台,loop是循环播放,autoplay是自动播放属性(刷新一下就不行了,跟浏览器有关,有的刷新后也可以),muted属性:静音播放。
    • 视频标签video,controls控制台必须有,loop循环,autoplay自动播放(同音频),muted静音播放(静音播放可以支持自动播放)。poster视频封面,可以通过css设置宽高。
  • 3、增强表单input
    • 主要是input的type属性
      • color:生成一个颜色选择器必须在form表单中适用才能向后端提交。加上一个submit按钮就能实现提交了
      • email:邮箱输入,在邮箱输入中输入的内容必须包含@符号。必须加上name值。
      • url地址:type=url,输入内容必须是个网址,https://www.……
      • phone:电话号码,用于手机浏览器,自动选择数字键盘,在电脑端内有意义。
      • range:滑块效果,类似音量的选择滑块。name属性得有,min,max属性可以规定最大最小值,value可以设置初始值,step控制每次移动的值
      • number:只能输入数字。min,max属性规定最大最小值,step规定步长。name也是必须加的。
      • search:搜索框,可以通过点击×号快速清除。
      • date:日期选择器,month:精确到月份,week:精确到周次,datetime:精确到时分秒。通过那么传递后端。
  • 3、选项列表
    • 搜索框中输入一个字后的提示信息
    <form>
        <input type="text" list="list">
        <datalist id="list">
            <option value="手机"></option>
            <option value="手表"></option>
            <option value="手环"></option>
            <option value="手镯"></option>
        </datalist>
    </form>
    
    • datalist就是提示列表,其中包含标签option表示选项,需要加一个id和输入框进行绑定,输入框中加list属性,值就是datalist的id值。支持模糊搜素。
  • 4、常用属性
    • aotufocus:自动聚焦,打开网页自动聚焦到一个输入框。只能有一个焦点
    • required:数据不能为空,必填项!!可以用于多个数据上。
    • multiple:一次输入多个内容
    • pattern:规定输入的内容的形式,[0-9][A-Z]{3}表示必须是一个数字加三个字母的形式!规定格式是通过正则表达式验证实现
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值