html表单元素介绍

最新推荐文章于 2021-07-21 15:10:07 发布

石头坡

最新推荐文章于 2021-07-21 15:10:07 发布

阅读量445

点赞数 1

分类专栏： Html5

本文链接：https://blog.csdn.net/u012222212/article/details/84702088

版权

Html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

单选按钮radio

<!--  单选按钮-->
          性别：
	<input type="radio" name="group1" value="boy" />男
	<input type = radio  name = "group1" value = "girl"/>女
	 你是：
        <input type="radio" name="Question2" value="90"/>90后
        <input type="radio" name="Question2" value="00"/>00后
        <input  type="radio" name="Question2" value="else"/>其他

1、对于单选按钮radio，加上跟没加上value属性值有什么区别？

在这里，对于初学者，我只能说一句，关于HTML表单这一章，初学者有不少疑惑的地方。就像单选按钮radio，其实表面上加value属性值跟没加是没什么区别的（外观上）。之所以加value是为了方便像服务器端传递数据，这个是属于后端技术的内容。所以大家请按部就班听从站长，哪些地方该加什么就加什么，以便初学者养成一个良好的代码编写习惯。

label标签

作用：用于绑定一个表单元素，当单机label标签的时候，被绑定的表单袁术就会获得焦点

和input标签搭配使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
    <!--label标签的使用-->
           <label>输入账号：<input type="text"/></label><br />
	<!--图像按钮-->
	<input type="image" src=""/>
	<!--下拉菜单-->
	籍贯：
	<select>
		<option>---请选择籍贯---</option>
		<option>北京</option>
		<option selected="selected">上海</option>
		<option>南京</option>
	</select>
	<br>
	<!--  单选按钮-->
          性别：
	<input type="radio" name="group1" value="boy" />男
	<input type = radio name="group1" value= "girl"  checked="check" />女
	<br>
	 你是：
        <input type="radio" name="Question2" value="90"/>90后
        <input type="radio" name="Question2" value="00"/>00后
        <input  type="radio" name="Question2" value="else"/>其他
        <br />
     <!--  复选框-->
     <input type="checkbox"  id = "one"checked="checked"/><label for="one">苹果</label>
     <input type = "checkbox" id = "two"/><label for="two">香蕉</label>
     <input type = "checkbox" id = "three" /><label for="three">柠檬</label>
        
        
	</body>
</html>

<!--html5的版本-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<header>语意：定义页面的头部 ,页眉</header>
		<nav> 语意：定义导航栏</nav>
		<footer>语意：定义页面底部，页脚</footer>
		<article>语意：定义文章</article>
        <section>定义区域</section>
        <aside>定义其所处内容之外的内容，侧边</aside>
<input type="text" value="输入明星" list="star">
	<datalist id="star">
		<option>张三</option>
		<option>刘德华</option>
		<option>刘若英</option>
		<option>刘晓庆</option>
		<option>郭富城</option>
		<option>张学友</option>
		<option>张杰</option>
	</datalist>
    <br />
      <br />
    
	<!--fieldset元素可将表单内的相关元素分组，打包，配合legend搭配使用
    -->
    <fieldset>
    	<legend>用户登录</legend>
    	用户名:<input type="text" /><br>  <br>
                    账号：<input type= "password">
    </fieldset>
    <br/>
    <br/>
    <fieldset>
    	<legend>HTML5新增的input type类型</legend>
    	邮箱：<input type = "email"> <br />
                   手机:<input type =""tel" /><br>
        数字：<input type ="number" /><br />
        url:<input type="url"><br />
        搜索：<input type="search" /><br />
区域：<input type="range" ><br/>
小时分钟：<input type ="time"><br />
年月日：<input type="date" /><br>
时间：<input type="datatime" /><br>
月年：<input type = "month"><br />
星期 年<input type="week" />
<input type= "submit" />


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

<!--常见新属性-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		用户名：<input type="text" placeholder="请输入用户名" autofocus="autofocus">
	    文件上传<input type="file" multiple="multiple">
	    	<!--必填项-->
	    <input type="text" required="required">
	    	<input type="text" accesskey="s">
	</body>
</html>