HTML input新增属性

最新推荐文章于 2024-07-29 09:25:14 发布

_wjl_

最新推荐文章于 2024-07-29 09:25:14 发布

阅读量1.1k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/abc_123_linbin/article/details/90311934

版权

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5新增占位符焦点多选属性</title>
</head>
<body>
    <!--自动获得焦点-->
	搜索：<input type="text" name="" placeholder="请输入搜索内容" autofocus="autofocus">
    <hr /> <br />
    <!--多文件上传-->
    上传头像 ：<input type="file" name="" multiple>  <br />

   
    <h4>自动记录完成</h4>
    <!--autocomplete
       1.需要提交按钮
       2.需要name
       3.取值：on/off
    -->
    <form action=""> 
       姓名：<input type="text" name="username" autocomplete> <br />
       <input type="submit" name="" value="提交">
    </form>

    <hr /> <br />

    <!--required不能为空 
        accesskey 规定激活（使元素获得焦点）元素的快捷键 采用alt + 字母的形式
    -->
    昵称：<input type="text" name="" required  accesskey="s" >


</body>
</html>

学生档案

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生档案</title>
</head>
<body>
	<form>
       <fieldset>
           <legend>学生档案</legend>
           <label>姓&nbsp;&nbsp;&nbsp;名：<input type="text" name="" placeholder="请输入姓名" autofocus> </label> <br/><br/>
          <label>手机号：<input type="tel" name=""> </label> <br/><br/>
          <label>邮&nbsp;&nbsp;&nbsp;箱：<input type="email" name=""> </label> <br/><br/>
          <label>所属学院：<input type="text" name="" list="institute" placeholder="请选择学院" ></label> <br/><br/>
           <datalist id="institute">
              <option>信息工厂</option>
              <option>数学</option>
              <option>国际关系</option>
           </datalist>

           <label>出生日期：<input type="date" name="" value="1995-01-01"></label> <br/><br/>
           <label>成&nbsp;&nbsp;&nbsp;绩：<input type="number" name=""></label>  <br/><br/>
           <label>毕业时间：<input type="date" name="" value="2019-01-01"></label> <br/><br/>
           <label><input type="submit" name="" value="提交"></label>
           <label><input type="reset" name="" value="重置"></label>

       </fieldset>
	</form>
</body>
</html>