Modify a list using HTML form

You can make use of SharePoint JavaScript Object Model.

https://msdn.microsoft.com/en-us/library/office/dn268594.aspx

Or you can use SharePoint WebService Wrapper SPServices.

https://spservices.codeplex.com

You can use JavaScript code to insert the data in SharePoint list.

Here is the reference code to add an item in Announcement list

function createListItem(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Title', 'My New Item!');
    oListItem.set_item('Body', 'Hello World!');
    oListItem.update();

    clientContext.load(oListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded() {
    alert('Item created: ' + oListItem.get_id());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

Please read the below article for more information.

Complete basic operations using JavaScript library code in SharePoint 2013

The easiest is to use SharePoint Designer

Create a new Form based on the the New/Edit/Display template

And edit the HTML, being careful with the XML SharePoint declares

Mark Rackley came up with an ingenious way of hijacking SharePoint's default list forms and rearranging them using your own HTML layout, which you can then style however you want.

You need a little bit of scripting knowledge (and ability to use jQuery definitely helps for grabbing and moving DOM elements), but the great thing about using this technique is that you use the edit controls (textboxes, people-pickers, date controls, etc) that SharePoint already generated, and moving them around does not disconnect them from the list, so you don't have to worry about the back end connections.

You can move stuff around however you like, and the form still works, so you don't necessarily need to go through the process of using JSOM or REST API to interact with the list.

The detailed instructions can be found on his blog

NB: this is for SharePoint 2013 (and I assume Online would work as well), not sure if there is a way to do this in 2010.