表单 form


form 基础

<form>
    <!--
文本框
注意:数据要提交到服务器中,必须要为元素指定一个name属性值
-->
    文本框 <input type="text" name="username">
    <br><br>
    <!-- 
密码框
-->
    密码框 <input type="password" name="password">
    <br><br>

    <!--
单选按钮
- 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
-->
    单选按钮 <input type="radio" name="hello" value="a">
    <input type="radio" name="hello" value="b" checked>
    <br><br>

    <!-- 
多选框
-->
    多选框 <input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="2">
    <input type="checkbox" name="test" value="3" checked>

    <br><br>

    <!-- 下拉列表 -->
    <select name="haha">
        <option value="i">选项一</option>
        <option selected value="ii">选项二</option>
        <option value="iii">选项三</option>
    </select>

    <br><br>
    <!-- 
提交按钮
-->
    <input type="submit" value="注册">
</form>

image-20201230203708588

input 常见 type

  • text
  • password
  • radio
  • checkbox
  • botton
  • subimit
  • reset
  • file
  • search
  • color
  • range
  • email
  • tel
  • number
  • date
  • time

常用属性

  • name
  • value
  • maxlength 最大长度
  • minlength 最小长度
  • placeholder 提示文本
  • autocomplete=”off” 关闭自动补全
  • required 有此属性为 必填
  • readonly 将表单项设置为只读,数据会提交
  • disabled 将表单项设置为禁用,数据不会提交
  • autofocus 设置表单项自动获取焦点

自制 search


文章作者: Liwker
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Liwker !
评论
 上一篇
2021.1.5 算法实训 2021.1.5 算法实训
这两天进行了学校安排的算法实训,总的感觉就是对算法的复习和具体项目的练习。 一、什么是算法1.算法:算法(Algorithm)是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机制(百度
2021-01-05
下一篇 
表格 table 表格 table
在现实生活中,我们经常需要使用表格来表示一些格式化数据: 课程表、人名单、成绩单…. 同样在网页中我们也需要使用表格,我们通过table标签来创建一个表格 基础语法就不详细说了 table<table border="1" width
2020-12-30
  目录