html之创建表单

最新推荐文章于 2022-10-12 17:13:44 发布

坤坤粉丝

最新推荐文章于 2022-10-12 17:13:44 发布

阅读量1.8k

点赞数 2

分类专栏： html 文章标签： html 前端

本文链接：https://blog.csdn.net/chalotte_kan/article/details/125873920

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注：个人创意，可能有硬凑部分

表单所用html知识：

<hr> ：一根水平分割线

<br>:换行

< value="默认显示在网页的值">

< maxlength =能在文本框中填写的最大长度>

与后台交互的所有标签都需要写在form标签里面：Action method

method 属性时指定提交数据的方式,有get和post

总的来说


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>表单</h1>
		<h2>将数据传递给服务器后台的</h2>
		<hr>
		<h2>表单标签都是需要写在form标签里面</h2>
		<h2>（form标签里面的属性：   action</h2>
		<h2>action 指定后台哪一个servlet类）</h2>
		
		<hr>
		<h2>于后台交互的所有标签都需要写在form里面</h2>
		<h2>method 属性是指定提交数据的   方式</h2>
		<hr>
		<form action="????" method="">
			
			<h2>文本框</h2>
			<h2>type="text"</h2>
			<h2>size   控制文本框显示的长度</h2>
			<h2>value="" 默认显示在文本框里面的内容</h2>
			<h2>maxlength   能在文本框填写的最大长度</h2>
			<input type="text">
			<br>
			<hr>
			<br>
			<h2>密码框</h2>
			<h2>type="password"</h2>
			<h2>size  控制文本框显示的长度</h2>
			<h2>maxlength   能在文本框填写的最大长度</h2>
			<input type="password">
			<br>
			<hr>
			<br>
			<h2>单选框</h2>
			<h2>（没有写name的时候，程序目前并不知道  哪几个是   一组的）</h2>
			<h2>type="radio"</h2>
			<h2>name 属性 指定为一组</h2>
			性别：<br>
			男<input type="radio" name="sex">
			女<input type="radio" name="sex"><br>
			教室：<br>
			101<input type="radio" name="clazz">
			102<input type="radio" name="clazz">
			103<input type="radio" name="clazz">
			<br>
			<hr>
			<br>
			<h2>复选框</h2>
			<h2>type="radio"</h2>
			<h2>name 属性 指定为一组</h2>
			爱好：
			<input type="checkbox">学习
			<input type="checkbox">吃饭
			<input type="checkbox">睡觉
			<input type="checkbox">发呆
			<br>
			<hr>
			<br>
			<h2>文件上传</h2>
			<h2>type="file"</h2>
			<input type="file">
			<br>
			<hr>
			<br>
			<h2>下拉列表</h2>
			<h2>select 指定下拉列表标签</h2>
			<h2>option 定义一个下拉选项</h2>
			<h2>multiple 指定下拉列表多选</h2>
			<select multiple="multiple" size="7">
				<option>龙岗</option>
				<option>宝安</option>
				<option>福田</option>
				<option>龙岗</option>
				<option>宝安</option>
				<option>福田</option>
				<option>龙岗</option>
				<option>宝安</option>
				<option>福田</option>
			</select>
			
			<br>
			<hr>
			<br>
			<h2>type="submit"</h2>
			<h2>value  指定按钮显示的内容</h2>
			<input type="submit" value="登录">
			
			
			<br>
			<hr>
			<br>
			<input type="text">
			<input type="text">
			<input type="text"><br>
			性别：<br>
			男<input type="radio" name="sex">
			女<input type="radio" name="sex">
			<h2>type="reset"</h2>
			<h2>重置(清空表单里面所有已经填写的数据)</h2>
			<input type="reset">
			
			
		</form>
		
		
		
		<table border="1">
			<tr>
				<td align="center">编号: 	</td>
				<td>&nbsp;&nbsp;&nbsp;&nbsp; 名字：</td>
			</tr>
			<tr>
				<td>1213888888</td>
				<td>尼古拉斯我四哥</td>
			</tr>
			
		</table>
		
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
	</body>
</html>

表单源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课堂作业：表单</title>
</head>
<body>
    <h2>免费开通人人网账号</h2>
    <table>
        <tr>
            <td>注册邮箱:</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td></td>
            <td>您还可以使用<a href="https://baike.baidu.com/item/%E8%B4%A6%E5%8F%B7/3189407?fr=aladdin">账号</a>注册或者<a href="https://baike.baidu.com/item/%E6%89%8B%E6%9C%BA%E5%8F%B7">手机号</a>注册</td>
        </tr>
        <tr>
            <td>创建密码:</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>真实姓名:</td>
            <td><input type="text"></td>
        </tr>
    </table>
    <form>
        &nbsp&nbsp&nbsp性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <br>
        <br>
        &nbsp&nbsp&nbsp生日：
        <select multiple="multiple" size="1">
            <option>1991</option>
            <option>1992</option>
            <option>1993</option>
            <option>1994</option>
            <option>1995</option>
            <option>1996</option>
            <option>1997</option>
            <option>1998</option>
            <option>1999</option>
            <option>2000</option>
            <option>2001</option>
        </select>年
        <select multiple="multiple" size="1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
        </select>月
        <select multiple="multiple" size="1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
        </select>日
        <br>
        <br>
        我现在：
        <select multiple="multiple" size="1">
            <option>正在上学</option>
            <option>正在上课</option>
            <option>正在上班</option>
        </select>
        <br>
        <br>
        <img src="2.jpg" height="60" width="80">
        <br>
        <br>
        验证码：
        <input type="text">
        <br>
        <br>
        <br>
        <input type="submit" value="登录">
        <input type="reset">
    </form>

</body>
</html>