html表单元素介绍

单选按钮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>

猜你喜欢

转载自blog.csdn.net/u012222212/article/details/84702088