您现在的位置:首页行业资讯

Web前端开发基础知识,HTML中表单元素的理解--中享思途

什么是HTML表单?
表单form是网页获取用户输入数据的一种方式,如图:

青岛web开发培训--中享思途

表单中通常包括各种输入框、文本标签、提交按钮等。
1、一个简单的表单
首先要有一个form标签,其他表单控件放到from标签中,第一个是label标签用来描述后面的文本框中需要输入什么内容,然后是一个input标签,type的值是text表示是一个文本框,然后也是一个input标签,type的值是submit,表示是一个提交按钮,当然想要真正的提交数据还需要一些额外的属性。
<form action=""><label for="">学生姓名</label>    <input type="text">    <input type="submit" value="保存"></form>
2、form标签不但包含所有的表单控件,还会告诉浏览器当你提交表单的时候要把表单数据发送到哪里,以及使用什么方式发送。
<form action="login.php" method="POST"></form>
action属性指定表单数据要发送到哪个服务器脚本上,例如这里发送到login.php ,method属性指定服务器发送的方式,有post和get两种方式,在表单当中常用post。
3、for属性和id属性
label标签for属性的值应该和input标签中id属性的值一致,这样这两个表单控件就会被关联起来。如下,这里将label关联到input上。
<form><label for="student_name">学生姓名</label>    <input type="text" id="student_name">    <input type="submit" value="保存"></form>

青岛web开发培训--中享思途

当我们点击文本标签"学生姓名"时候,文本框会自动获取输入光标,等待用户输入数据。
4、input标签的type属性
type属性决定input标签显示成什么样子,type属性种类很多,如下:
<form><input type="text">    <input type="checkbox">    <input type="radio">    <input type="file">    <input type="password">    <input type="submit">    <input type="reset"> </form>
5、文本区域
input文本框标签可以接受少量的单行文本,textarea标签可以接受用户输入的多行文本,如下,和input标签不同,textarea标签必须有开始标签和结束标签。
<label for="summary">总结</label><textarea id="summary" cols="30" rows="10"></textarea>

青岛web开发培训--中享思途

6、下拉列表
使用select标签和option标签创建下拉列表
<select name="" id=""><option value="">男</option>    <option value="">女</option> </select>
综合实例:
<h2>学生信息</h2><form action="success.html">    <label for="student-name">姓名</label>    <input type="text" id="student-name" value=""><br>    <label for="photos">上传照片</label>    <input type="file" id="photos"><br>    <label for="">性别</label>    <input type="radio" name="gender" id="male" checked><label for="male">男</label>    <input type="radio" name="gender" id="female"><label for="female">女</label><br>    <label for="">班级</label>    <select name="" id="">        <option value="">一班</option>        <option value="" selected>二班</option>        <option value="">三班</option>        <option value="">四班</option>    </select><br>    <label for="teacher-comments">老师评语</label>    <textarea name="" id="teacher-comments" cols="30" rows="10"></textarea><br>    <input type="checkbox" id="pass" checked>    <label for="pass">考试通过</label><br>    <input type="submit" value="提交">    <input type="reset" value="重新填写"> </form>

青岛web开发培训--中享思途
青岛web开发培训--中享思途

【关键词:青岛web开发培训,学web开发多少钱,web开发培训哪家好,中享思途】

 st_bottom
青岛Java培训,青岛HTML5培训,青岛UI培训,青岛IT培训,青岛嵌入式培训,青岛运维培训,Java就业培训,专业ui培训,前端开发培训,嵌入式培训价格,运维培训哪家好,IT培训,青岛思途,中享思途IT培训
Copyright © 青岛思途共享科技信息服务有限公司 鲁ICP备14027489号-2

鲁公网安备 37021402000988号

青岛Java培训,青岛HTML5培训,青岛UI培训,青岛IT培训,青岛嵌入式培训,青岛运维培训,Java就业培训,专业ui培训,前端开发培训,嵌入式培训价格,运维培训哪家好,IT培训,青岛思途,中享思途IT培训