html文檔編輯

1.表單制作

表單里面有兩個屬性是必須的：action 提交到后臺；method提交方式，默認是get方式，但是提交的數據會顯示在提交欄上不安全，一般使用post方式，底層是以流的形式提交的。<form action="" method="post"></form>

代碼區：

<label for="mz">姓名：</label><input type="text" name="username" value="" placeholder="請輸入你的用戶名" id="mz"/><br>
?密碼：<input type="password" name="mima" placeholder="請輸入密碼"/><br>
?<!-- 單選按鈕注意實現，單選按鈕指的是一次只能選擇一個 那要實現這種效果 多個單選按鈕的name屬性值必須一樣 -->
?性別：<label for="nan">男</label> <input type="radio" name="sex" id="nan" value="0"/> <input type="radio" name="sex" value="1"/>女 <input type="radio" name="sex" value="2"/>妖<br>
?愛好：
?<!-- 復選框 的name 屬性值 也要一樣 checked="checked" 默認選中-->
?<input type="checkbox" name="hobby" checked="checked" id="pb" value="paobu"/><label for="pb">跑步</label>
?<input type="checkbox" name="hobby" checked="checked" value="qixing"/>騎行
?<input type="checkbox" name="hobby" checked="checked" value="lvyou"/>旅游
?<br>
?學歷：
?<!--? selected默認選中項 name 和 value 屬性必須要有-->
?<select name="xueli">
??<option>---請選擇學歷--</option>
??<option value="youeryuan">---幼兒園--</option>
??<option value="xiaoxue">---小學--</option>
??<option value="chuzhong">---初中--</option>
??<option value="gz">---高中--</option>
??<option value="dx" selected>---大學--</option>
?</select>
?<br>
?個人描述：<textarea rows=10 cols=50 name="ms">請簡單描述一下你的個人特點</textarea>
?<br>
?圖像：<input type="file" name="photo"/><br>
?<input type="submit" value="提交"/>
?<input type="reset" value="重置"/>

?? 這是一份一份完整的表單，但是，排列不整齊。我們可以用table表格使其排列整齊

代碼區：

<table width="60%" height="60%" border="1" cellspacing="0" align="center" bgcolor="aquamarine" bordercolor="blue">
????<caption>
?????<h1>用戶信息表</h1></caption>
????<tr>
?????<td>用戶名：</td>
?????<td><input type="text" name="username" value="" placeholder="請輸入用戶名" /></td>
????</tr>
????<tr>
?????<td>密碼：</td>
?????<td><input type="password" name="pwd" placeholder="請輸入密碼" /></td>
????</tr>

這樣排列下來，表單就會對其，而且可以設置表單的位置，運用學過的table知識，美化表單。

2.合并單元格

????? 當我們需要合并單元格時，可以講table中的兩個或者多個單元格合并，來達到自己想要的表單。

代碼區：

<tr>
?????<td colspan="2" align="center">
??????<input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/>
?????</td>

</tr>

colspan=?,?表示合并單元格的數量，colspan 合并橫向單元格，rowspan合并縱向的單元格。特別注意的是，合并單元格后，會刪除相應的單元格



總結

以上是生活随笔為你收集整理的HTML---基础篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。