form表单的基本控件
<input type="text" name="name">-----文本框
<input type="password" name="pwd">-----密码框
<input type="number" name="score">-----数值框
<input type="file" />------上传文本标签
<input type="email" name="email">---邮件框
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女 -----radio: 表示是单选按钮,读个radio姚形成按钮组,才可以实现单选的效果,要形成按钮组,必须让他们的名称相同
选按钮
<input type="checkbox" name="hobby" checked value="足球">足球
<input type="checkbox" name="hobby" value="网球">网球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" checked value="台球">台球
下拉列表
<select name="age" id="age">
<option value="-1">请选择年龄</option>
<option value="20">20岁</option>
<option value="21">21岁</option>
<option value="22">22岁</option>
<option value="23">23岁</option>
</select>
<textarea rows="5" cols="50"></textarea>-----文本域(多行文本框)
<input type="submit" value="提交" >
<input type="reset" value="重置">
<input type="button" value="普通按钮">------三种不同的按钮 PS:普通按钮本身是没有任何作用的
<input type="text"
name="name"
placeholder="请输入姓名"
required>
@@@ required:内容不允许为空
@@@ placeholder:控件中,内容为空时的提示信息
placeholde 文本提示信息 readonly 只读 disabled 禁用(现在很少用了)
actlin:指把数据提交到什么地方去处理
method:它用于指定表单的提交方式
get:这种方式提交数据不安全,他提交的数据将会在网页地址显示,不能用于
post:这种方式
<form action="index.html">
<!--action 里面是提交的地址-->
文本标签:<input type="text" name="name">
<br>
密码标签:<input type="password" name="pwd">
<br>
数值标签:<input type="number" name="score">
<br>
邮件标签:<input type="email" name="email">
<br>
上传文本标签:<input type="file" />
<br>
单选按钮:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<!--radio: 表示是单选按钮,读个radio姚形成按钮组,
才可以实现单选的效果,要形成按钮组,必须让他们的名称相同--->
<br>
复选按钮:
<input type="checkbox" name="hobby" checked value="足球">足球<!--ckecked为默认选中-->
<input type="checkbox" name="hobby" value="网球">网球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="台球">台球
<br>
下拉列表:
<select name="age" id="age">
<option value="-1">请选择年龄</option>
<option value="20">20岁</option>
<option value="21">21岁</option>
<option value="22">22岁</option>
<option value="23">23岁</option>
</select>
<br>
文本域(多行文本框):
<textarea rows="5" cols="30"></textarea>
<!--rows为高度 cols为宽度-->
<br>
三种按钮:
<input type="submit" value="提交" >
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<!--普通按钮本身是没有任何作用的 -->
</form>
效果图:
<input type="text" name="name" placeholder="请输入姓名" required>
<!--required:内容不允许为空 placeholder:控件中,内容为空时的提示信息-->
<input type="text" readonly value="123"/>
<input type="text" disabled value="123"/>
<!--readonly 只读 disabled 禁用(现在很少用了)-->