表单元素的实际应用

    技术2025-04-04  17

    1.1input文本输入框

    <div> 输入框: <input type="text" value="0"placeholder="请输入"> </div>

    网页中常见的账号输入,文本输入都可以用type属性text实现。 1.2密码输入框

    <div> 密码框: <input type="password" value="" name="pwd"> </div>

    密码输入框会将你输入部分替换成特殊原点或者符号,用type属性的password实现,呈现出来的效果如下所示: 1.3数字输入框 顾名思义只能在框里输入数字,常见在年龄输入:

    <div> 数字框: <input type="number" > </div>

    效果如下所示: 1.4checkbox 常用于页面里同意协议那部分的勾选框,也可以用作复选框:

    <input type="checkbox" name="check"> <span>我已阅读并同意遵守</span>

    效果如下: 1.5 radio 常用于网页中需要单选的地方,前提是name属性值必须相同,如果不同就不能达到单选的效果。

    <div> 性别: <input type="radio" name="sex" value="1"> 男 <input type="radio" name="sex" value="0"> 女 </div>

    效果如图: 2.下拉选择框: select元素用作实现:

    <select name="address" id="text"> <option value="0">中国</option> <option value="1">其他国家</option> </select>

    效果如图:

    Processed: 0.009, SQL: 9