HTML 表单
<form> 是 HTML 表单标签,能包含其他表单相关元素。
<form> 表单元素 </form>
注:表单元素不是一定要放在 <form> 里面,也可以单独使用。
标签 | 描述 |
---|---|
<input> | 输入标签 type="text" type="password" type="radio" type="checkbox" type="button" type="submit" type="reset" type="hidden" |
<select> | 下拉菜单 |
<textarea> | 文本域 |
<button> | 按钮 |
<input> 输入元素
<form>
<span>姓名 :</span>
<input type="text" name="name" value="张三" placeholder="请输入姓名"/>
</form>
<input> 为输入标签。
1.type="text" 输入框 :name 为 input 元素的名字。 value 为 input 元素的值。placeholder属性为输入框的提示信息,在没有输入字符时显示。
2.type="password" 密码 :<form>
<span>密码 :</span>
<input type="password" name="pwd" placeholder="请输入密码"/>
</form>
密码字段字符不会明文显示,而是以星号或圆点替代。
3.type="radio" 单选按钮 :<form>
<p>水果 :</p>
<input type="radio" name="Fruits" value="apple"/>苹果<br/>
<input type="radio" name="Fruits" value="Peach"/>桃子<br/>
<input type="radio" name="Fruits" value="Banana" checked="checked"/>香蕉<br/>
<input type="radio" name="Fruits" value="watermelon"/>西瓜
</form>
设置单选按钮时,只要是同一组选项,则 name 值相同,值不同,而且只能选中一个。如果要默认选中,则设置 checked。
4.type="checkbox" 复选框 :<form>
<p>兴趣 :</p>
<input type="checkbox" name="like" value="1"/>唱歌<br>
<input type="checkbox" name="like" value="2"/>跳舞<br>
<input type="checkbox" name="like" value="3" checked="checked"/>运动<br>
</form>
name 相同的也可以多选。
5.type="button" 普通按钮 :<input type="button" value="提交" name="btn"/>
普通按钮,定义可点击的按钮,但没有任何行为,常用于用户点击时调用JavaScript方法。
6.type="submit" 提交按钮 :<form action="action.php" method="get">
<input type="password" name="pwd" placeholder="请输入密码"/>
<input type="submit" value="提交"/>
</form>
提交按钮通常搭配 <form> 使用。当用户单击提交按钮时,输入内容会被提交到服务器。
7.type="reset" 重置按钮 :<input type="reset" value="重置按钮" name="reset" />
8.type="hidden" 隐藏按钮 :
<input type="hidden" value="信息"/>
隐藏按钮 通常用来放一些信息。
HTML - <select> 元素(下拉列表)
<select name="fruits">
<option value="apple">苹果</option>
<option value="Banana" selected>香蕉</option>
<option value="Peach">桃子</option>
<option value="watermelon">西瓜</option>
</select>
selected 设置默认选中。
HTML - <textarea> 文本域
css 样式
<style type="text/css">
textarea{
resize: none;
width: 500px;
}
</style>
<textarea name="msg" rows="3" placeholder="意见反馈">我是</textarea>
rows="3" 表示3行。resize: none; 设置在浏览器显示时,用户不能改变元素尺寸大小。除了 value 可以设置 <textarea> 的值,还有就是一种就是直接写在 <textarea> 里面的文本,如 "我是"。
HTML - <button> 按钮
<button type="button" onclick="alert('你好!')">按钮</button>
定义可点击的按钮。onclick 定义事件。alert 浏览器弹出框。点击按钮,浏览器会弹出 "你好!"。