form
<form method="post"(规定如何发送表单,常用值get/post) action="result.html">(表示向何处发送表单数据)</form>
文本框
<label for="username">用户名</label>
<input type="text" id="username">
注:label元素不会向用户呈现任何特殊效果。但若label标签for属性与相关元素的id值相同的话,点击label对应的文本浏览器就会自动将焦点对应到相应的表单元素上
表单控件与label元素的隐式关联与显式关联
- 隐式关联
<label>用户名<input type="text" name="user"></label>
- 显式关联
<label for="username">用户名</label>
<input type="text" id="username">
<form action="">
<!-- 文本框-->
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</form>
显示效果:
<form action="">
<!-- 文本框-->
<label for="username">用户名</label>
<input type="text" id="username" value="请输入用户名">
</form>
显示效果
结论:placeholder与value后面的值都可以显示在文本框内,但区别是当焦点转移到文本框后用placeholder时,对应的值消失取而代之的是用户输入的值,placeholder只是给用户的提示。而当焦点转移到文本框后用value则对应的值不会消失,用户可以在该基础上添加或者删除
<label for="username">用户名</label>
<input type="text" id="username" value="请输入用户名" autofocus>
注:autofocus,浏览器打开或者刷新时,焦点自动固定到对应的表单元素上
<label for="username">用户名</label>
<input type="text" id="username" value="请输入用户名" disabled>
注:disabled,浏览器首次加载的时候禁用此元素,用户无法选定或者修改
<label for="username">用户名</label>
<input type="text" id="username" maxlength="10">
注:maxlength定义文本框内字符串的最大值
单选框
<input type="radio" id="man" >
<label for="man">男</label>
<input type="radio" id="woman" >
<label for="woman">女</label>
这个时候两个都可以被选择,就像这样
但是很显然不太符合我们的预期效果,因为性别不可能又是男又是女,因此可以这样修改
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="woman" name="sex">
<label for="woman">女</label>
这样就保证只能选择一个性别了,但是又有一个问题:打开或者刷新的时候没有默认选择的值。要想解决这个问题,我们只需要加入checked就可以解决了
<input type="radio" id="man" name="sex" checked>
<label for="man">男</label>
<input type="radio" id="woman" name="sex">
<label for="woman">女</label>
这样默认的就是男性了
复选框‘
<input type="checkbox" id="game" >
<label for="game">游戏</label>
<input type="checkbox" id="music">
<label for="music">音乐</label>
效果
上面我们可以看到在单选框内我们写了两个name,并且保证了两个name的值一样,说明Input里面的name在单选框里相同的name可以使得只能选择其中一个,而在单选框之外name的值方便提交
下拉列表
<label for="dizhi">地址</label>
<select name="dizhi" id="dizhi">
<option value="bg">北京</option>
<option value="sh">上海</option>
<option value="cd">成都</option>
<option value="yn">云南</option>
</select>
效果:
<label for="dizhi">地址</label>
<select name="dizhi" id="dizhi">
<option value="bg">北京</option>
<option value="sh" selected>上海</option>
<option value="cd">成都</option>
<option value="yn">云南</option>
</select>
效果
注:未加selected时下拉列表第一个默认显示排在第一个的哪一个,如果加了selected,则显示所对应的那个
文本域
<label for="tx">填写</label>
<textarea name="tx" id="tx" cols="30" rows="10"></textarea>
效果
注:在HTML5中一般不用cols与rows来规定文本域的大小,而是用css来实现
提交
- 第一种提交方法
<input type="submit" id="sub" value="交">
- 第二种提交方法
<button>提交</button>
注意:button这个标签在表单里面有默认提交功能,但在外面就仅仅只是一个按钮